Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add karlng279/ai-ready-product-workflow-v2 --skill design-component-specgit clone --depth 1 https://github.com/karlng279/ai-ready-product-workflow-v2Wrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/karlng279/ai-ready-product-workflow-v2/design-component-spec)<a href="https://agentmods.dev/skills/karlng279/ai-ready-product-workflow-v2/design-component-spec"><img src="https://agentmods.dev/badge/skills/karlng279/ai-ready-product-workflow-v2/design-component-spec/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/karlng279/ai-ready-product-workflow-v2/design-component-spec"><img src="https://agentmods.dev/badge/skills/karlng279/ai-ready-product-workflow-v2/design-component-spec.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00000 | $0.02863 |
| Opus 5 | $0.00000 | $0.01432 |
| Sonnet 5 | $0.00000 | $0.00573 |
| Haiku 4.5 | $0.00000 | $0.00286 |
Grade A, and why
design-component-spec scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 309 lines — stays where its author put it; the contents beside it link to each section on GitHub.
design-component-spec
You are a design format enforcer for component specifications. When this skill is active, produce COMP-XXX component spec files that bridge wireframes and code implementation. This skill enforces specification format — it does not replace design intelligence (see ui-ux-pro-max) or wireframe format (see design-wireframe). These three skills work in sequence: ui-ux-pro-max → design system → design-wireframe (WF-XXX) → design-component-spec (COMP-XXX) → code.
Knowledge Base
Full rules, templates, catalog, and examples live in design-framework/stage2-component-specs/:
rules.md— COMP-XXX format, ShadCN approach, Tanstack Table config, quality gateshadcn-component-catalog.md— all available ShadCN components with variants, sizes, statestanstack-table-reference.md— full Tanstack Table configuration referencetemplate-component-spec.md— blank standard component templatetemplate-table-spec.md— blank Tanstack Table templateexamples.md— worked examples
Always read design-framework/stage2-component-specs/rules.md before producing a component spec. Read shadcn-component-catalog.md to verify component names and variants.
Required Inputs
Before generating a component spec, confirm you have:
- Approved wireframe (
design/wireframes.md) — with WF-XXX IDs and AC mapping - USD file(s) — for AC references and traceability
- Feature name — for file naming and traceability
Generate one COMP-XXX file per logical component (form, table, modal, card, navigation section). A single wireframe may produce multiple COMP-XXX files.
COMP-XXX File Structure
Store in: features/{feature-name}/design/COMP-XXX.md
# COMP-XXX: [Component Name]
**Component ID:** COMP-XXX
**Wireframe:** WF-XXX — [Screen Name]
**Stories:** ST-XXX, ST-YYY
**Acceptance Criteria:** AC-001, AC-002, AC-003
**Component Type:** Form | Table | Card | Modal | Navigation | Other
---
## Overview
**Purpose:** [What this component does]
**Context:** [Where it appears — which page/section]
**User Interaction:** [How users interact with it]
**Key Functionality:** [Main behaviors]
---
## ShadCN Component Mapping
| Element ID | Element | ShadCN Component | Variant | Size | Props | States |
|------------|---------|-----------------|---------|------|-------|--------|
| COMP-XXX-EL-001 | Email Input | Input | — | default | type: email, required: true, placeholder: "[email protected]" | default, focus, error, disabled |
| COMP-XXX-EL-002 | Submit Button | Button | default | default | type: submit, disabled: false | default, hover, focus, disabled, loading |
| COMP-XXX-EL-003 | Cancel Button | Button | outline | default | type: button | default, hover, focus |
---
## [Data Table Configuration (if applicable)]
**Table ID:** [descriptive-table-id]
**ShadCN + Tanstack Table**
### Columns
| # | Column | Accessor | Sortable | Filterable | Cell Rendering |
|---|--------|---------|---------|-----------|----------------|
| 1 | ID | `id` | ✅ | ✅ | Plain text |
| 2 | Status | `status` | ✅ | ✅ | ShadCN Badge (variant: by status value) |
| 3 | Customer | `customer.name` | ✅ | ✅ | Plain text |
| 4 | Created | `createdAt` | ✅ | ❌ | Formatted date: "MMM DD, YYYY" |
| 5 | Actions | — | ❌ | ❌ | Button group: [View] [Edit] [Delete] |
### Table Settings
| Setting | Value |
|---------|-------|
| Pagination | Enabled — 10 rows per page (user-selectable: 10, 25, 50) |
| Default Sort | `createdAt` DESC |
| Multi-column Sort | Enabled |
| Global Search | Enabled — debounced 300ms |
| Column Filters | Enabled on: Status, Customer |
| Row Selection | Multi-select with header checkbox |
### States
| State | Behavior |
|-------|---------|
| Empty | Show empty state: icon + "No [items] found" + optional CTA button |
| Loading | Show skeleton rows (match column count) |
| Error | Show error message + retry button |
---
## Layout Structure
**Container:** [e.g., "Full-width card with p-6 padding"]
**Layout System:** [Grid | Flex | Stack]
**Spacing:** [e.g., "gap-4 between form fields, gap-6 between sections"]
**Responsive Behavior:**
| Breakpoint | Behavior |
|-----------|---------|
| Desktop (> 1024px) | [Two-column layout, sidebar visible] |
| Tablet (640px–1024px) | [Single column, sidebar collapsed] |
| Mobile (< 640px) | [Stacked fields, full-width buttons] |
---
## Component Composition (if nested)
Dialog (ShadCN) ├── DialogTrigger: Button (variant: default) — "Create Item" ├── DialogContent │ ├── DialogHeader │ │ ├── DialogTitle: "Create New Item" │ │ └── DialogDescription: "Fill in the details below." │ ├── DialogBody: [Form fields] │ └── DialogFooter │ ├── Button (variant: outline): "Cancel" │ └── Button (variant: default): "Create"
---
## States
| State | Description |
|-------|-------------|
| Default | Initial loaded state |
| Hover | Mouse-over appearance (desktop only) |
| Focus | Keyboard focus ring visible |
| Active | While user is interacting |
| Disabled | When action is not available |
| Loading | During async operation (spinner or skeleton) |
| Error | Validation failed or system error |
| Success | Action completed successfully |
| Empty | No data to display (lists/tables) |
---
## Validation and Error Handling
| Field | Rule | Error Message | Timing |
|-------|------|--------------|--------|
| Email | Required, valid email format | "Please enter a valid email address" | On blur |
| Password | Required, min 8 characters | "Password must be at least 8 characters" | On blur |
| Submit | All required fields valid | — | On submit |
**Error Placement:** Below the field, `text-sm text-destructive`
---
## Accessibility
| Requirement | Implementation |
|-------------|---------------|
| ARIA Labels | All inputs have `aria-label` or associated `<label>` |
| Keyboard Nav | Tab order follows visual left-to-right, top-to-bottom order |
| Focus Management | Modal traps focus on open; returns to trigger on close |
| Screen Reader | Form errors announced via `aria-live="polite"` |
| Touch Targets | All interactive elements ≥ 44×44px |
---
## Design Rules Applied
| Token Type | Value |
|-----------|-------|
| Primary color | `bg-primary` / `text-primary-foreground` |
| Destructive | `bg-destructive` / `text-destructive-foreground` |
| Spacing | `gap-4` (form fields), `gap-6` (sections), `p-6` (card padding) |
| Typography | `text-sm` labels, `text-base` inputs, `text-lg font-semibold` heading |
| Border radius | `rounded-lg` (cards), `rounded-md` (inputs) |
---
## Traceability
| Wireframe Element | Component ID | Acceptance Criteria | Notes |
|-------------------|-------------|---------------------|-------|
| Email Input | COMP-XXX-EL-001 | AC-001, AC-003 | Required field, email format validation |
| Submit Button | COMP-XXX-EL-002 | AC-005 | Disabled until all required fields are valid |
| Cancel Button | COMP-XXX-EL-003 | AC-006 | Navigates back without saving |
**Coverage:**
- [ ] All wireframe elements mapped to component IDs
- [ ] All ACs addressed in traceability table
- [ ] No orphaned elements (no element without a COMP-XXX-EL-YYY ID)
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 309 lines · 0 tokens per session scan A 6917b57ae0fa
design-component-spec is a skill published in the GitHub repository karlng279/ai-ready-product-workflow-v2 (6 stars, last pushed 8d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 2,863 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
webgl-holographic-foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
html-ppt-hermes-cyber-terminal
OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.
html-ppt-taste-brutalist
16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
accessibility
Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.
make-resume
A Chinese-language tool for creating editable HTML resumes that can be changed in a browser and printed to PDF. It uses available resume templates when they are installed and otherwise provides a simpler fallback.