Agent skill

docs-component

(ePost) Document a klara-theme component (Figma data + prop mapping)

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/docs-component

Metadata

Additional technical details for this skill

connections 
{
    "requires": [
        "web-ui-lib",
        "web-figma"
    ]
}
argument hint
<componentKey> [nodeId]

SKILL.md

/docs-component

Document a klara-theme component by extracting Figma data and creating prop mappings.

Usage

/docs-component <componentKey> [nodeId]

Arguments

  • componentKey (required): Component identifier (e.g., button, select, dialog)
  • nodeId (optional): Figma node ID. If not provided, will be looked up from manifest or user will be prompted.

Examples

bash
# Document a component (nodeId from manifest)
/docs-component button

# Document with explicit Figma node ID
/docs-component select 207:134939

# Batch document all pending components
/docs-component --batch

# Batch document components in a category
/docs-component --batch forms

Process

  1. Route: Command routes to epost-documenter
  2. Detect: Documenter detects klara-theme context
  3. Delegate: Delegates to epost-implementer with:
    • componentKey: The component to document
    • workflow: document-component
  4. Execute: Implementer follows web-ui-lib-dev/references/document-component.md skill aspect:
    • Extract Figma data via web-figma/references/extraction-procedure.md
    • Cross-reference with codebase
    • Write <componentKey>.figma.json
    • Write <componentKey>.mapping.json
    • Update manifest status
    • Validate against schemas

Output

  • libs/klara-theme/figma-data/components/<componentKey>.figma.json — Figma component data
  • libs/klara-theme/figma-data/mappings/<componentKey>.mapping.json — Prop mappings
  • libs/klara-theme/figma-data/manifest.json — Updated status

Related

  • Skill: .github/skills/web-ui-lib-dev/references/document-component.md
  • Extraction: .github/skills/web-figma/references/extraction-procedure.md
  • Manifest: libs/klara-theme/figma-data/manifest.json
  • Schemas: libs/klara-theme/figma-data/schema/

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results