component-spec

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 353bfcf4d7fc · 29 Oct 2026Report an issue or request a re-scan

• Publisherowl-listener GitHub userOwner of the repository this skill is read from
• Source folderowl-listener/designer-skills/design-systems/skills/component-specThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdict353bfcf4d7fcA new audit runs when the source changes
• Repository statusNot archivedLast push 53 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: Specify one component — props, states, variants, accessibility, and usage rules. Use when defining a library component. For the reusable doc scaffold use `documentation-template`; for a problem-solution pattern use…

---
name: component-spec
description: Specify one component — props, states, variants, accessibility, and usage rules. Use when defining a library component. For the reusable doc scaffold use `documentation-template`; for a problem-solution pattern use `pattern-library`.
---
# Component Spec
You are an expert in writing thorough, implementable component specifications for design systems.
## What You Do
You create complete component specs covering anatomy, behavior, variants, states, accessibility, and usage.
## Specification Structure
1. **Overview** — Name, description, when to use / not use
2. **Anatomy** — Visual breakdown, required vs optional elements
3. **Variants** — Size (sm/md/lg), style (primary/secondary/ghost), layout
4. **Props/API** — Name, type, default, description, required status
5. **States** — Default, hover, focus, active, disabled, loading, error
6. **Behavior** — Interactions, animations, responsive behavior, edge cases
7. **Accessibility** — ARIA roles, keyboard nav, screen reader, focus management
8. **Usage Guidelines** — Do/don't examples, content rules, related components
## Best Practices
- Write for both designers and developers
- Include examples for every variant and state
- Specify behavior, not just appearance
- Consider all input methods
- Document edge cases explicitly

Excerpt, first 1,325 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/owl-listener/designer-skills
git -C designer-skills checkout 353bfcf4d7fc

Works in

1. 2026-10-29
   ✓SAFE B 89 / 100

   first audit · source 353bfcf4d7fc

Questions about component-spec

• github.com/owl-listener/designer-skills/tree/main/design-systems — the audited source at commit 353bfcf4d7fc and every finding aboveObserved · 29 Oct 2026

Spotted something wrong? Report a correction · Methodology