Claude Skills by cris-achiardi

SUPERSEDED, DO NOT USE — describes the retired hand-authoring flow and writes to packages/react/src/components/, a directory that no longer exists. The library is now contract-driven and there is no replacement skill yet. Read packages/contracts/components/README.md instead. Retained only for its reasoning. Originally: build a React component from an accepted decision — the five files, its agnostic contract and React binding, the barrel entry, and every gate. Use when asked to "create the But...

Turn a research report in docs/research/ into one or more Architecture Decision Records in docs/ADR/. Use when asked to "write the ADR", "record this decision", "decide the token architecture", "turn the report into decisions", or once a report in docs/research/ has open questions in it. Writes records and updates the index; never writes code.

BLOCKED, DO NOT USE — reads component TSX from packages/react/src/components/, a directory that no longer exists; component source is now generated into consumers' repositories. Needs rewriting against the contract. Originally: generate a Figma component set from a component in that directory, through the figma-console MCP. Reads the component's TSX, CSS module and contract, then creates variants bound to the source file's Figma variables and text styles. Use when asked to "generate the Figma...

Lay out and document a component's page in the Figma design source — title and written description, the component set with its labelled cell grid, and extension tables of locked instances for states and properties that are not variant axes. Use when asked to "document the Button page", "add the description and grid", "show the states", "reorganise the component pages", or when a component set exists in Figma and needs the surrounding explanation. Works on ANY component set, including ones thi...

Build visual explanations of this design system on a Figma canvas — node-graph diagrams with elbow connectors (component APIs, token tiers, architecture, data flow), spec and comparison tables, annotated anatomy mocks with numbered callouts, and flow diagrams. Use when asked to "explain X in Figma", "diagram this", "make a component API map", "visualise the token tiers", "put a spec table in Figma", "annotate this mock", or for a board that communicates how something works. NOT for producing ...