When to use this workflow
Use component metadata to make selection rules and implementation behavior discoverable together. A prop list explains configurable inputs, while the contract explains purpose, composition, supported states, and alternatives. Agents and people need both to choose a component correctly.
A worked example
For a button exercise, inspect the implementation and existing design reference before drafting metadata. Record the public import, variants, default size, icon rules, and interaction behavior. Add examples for a form action group and a destructive flow, then explain which choices belong to the component and which belong to the surrounding product.
Decisions and common mistakes
When Figma, code, and documentation disagree, show the conflict and its sources. Do not let a plausible recommendation become an approved requirement. The TDP Figma-to-Storybook demonstration uses this audit to surface differences before implementation, including missing states and unclear usage guidance.
What to hand off
Keep the contract beside the implementation and link it from the design-system entry point. Verify examples against actual code and runnable stories. When a supported behavior changes, update all three in the same review so consumers do not inherit contradictory instructions.
Set up and try the skill
1. Start with one concrete task
Bring: Component source, props, variants, states, and existing usage examples.
First task: Document purpose and selection rules alongside actual API behavior and accessibility requirements.
Choose a small task for “create ai component metadata.” Provide the relevant file, screen, or brief and define what a useful result should contain. Keep the original version available for comparison.
2. Install and verify the instructions
Run this command from the project where you want the skill available. Follow the installer’s host selection, then confirm the skill appears in that host. The command is the installation method documented by the TDP repository.
npx skills add thedesignproject/agent-skills -s ai-component-metadataRead the full skill instructions for prerequisites and supported tools. Installing a skill does not automatically connect Figma or grant access to external tools.
3. Apply it with your project context
Use the starter request below with the relevant inputs attached or referenced. Confirm that the host loaded the intended skill; a matching name alone is not evidence that its instructions were applied.
4. Review the result
Verify each prop and example against implementation; mark undocumented behavior instead of inventing it.
Compare the output with the task’s acceptance criteria. Check factual claims, unsupported assumptions, and any changes to the interface. For code or design changes, review real states and behavior before treating the result as finished.
5. Keep what works
Save approved outputs with their source and ownership. Note which instructions helped, where the result needed correction, and what must be checked next time. Use the workflow below to connect this task to its next step.
A starter request
Adapt this example to your files, audience, and requirements.
Create metadata for this component: purpose, props, variants, states, accessibility expectations, examples, and when not to use it. Flag undocumented behavior.
Completion checklist
- The inputs and intended result are explicit.
- Required files and tools are available in the chosen host.
- The result has been reviewed against the actual task.
- Limitations and follow-up checks are recorded.