skills.rest
daangn
daangnOFFICIAL
Explore all skills by this author →
Website𝕏@daangnteamGitHub

seed-create-component

Plans and implements SEED Design System components across React and Lynx platforms.

1.1k|89|Updated Mar 11, 2021
Search Tags:#tokens#Scaffolding#lynx#Design system#reAct#REGISTRY#Component
One-click install
npx skills add https://github.com/daangn/seed-design --skill seed-create-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: seed-create-component
Source: https://github.com/daangn/seed-design/tree/main/skills/seed-create-component
Command: npx skills add https://github.com/daangn/seed-design --skill seed-create-component

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Creating or modifying components in the SEED Design System requires coordinating many layers—Rootage tokens, Qvism recipes, headless logic, styled UI, registry snippets, docs, and examples—across both React and Lynx runtimes. This Skill routes that work through the correct decision gates so nothing is missed or over-built.

Core Features & Use Cases

  • Component workflow routing: Classifies requests as existing-component changes, new components, or docs/Storybook-only work, then applies only the relevant references and sibling skills.
  • Platform and delivery gating: Determines target platform (react, lynx, cross-platform) and delivery surface (package-only, snippet-only, package+snippet, docs-only) before any file is written.
  • Scaffold planning script: Generates a read-only file plan distinguishing source, reference, and generated files, and flags conflicts with existing implementations.
  • Use Case: When asked to add a new Toggle component for Lynx with controlled state, the Skill checks the component map, selects Lynx patterns and accessibility attributes, plans the minimal file set, and connects implementation to verification, changeset, and PR preparation.

Quick Start

Ask the assistant to create a new SEED component or modify an existing one, for example: add a cross-platform SegmentedControl component with shared tokens and separate React and Lynx documentation.

Frequently Asked Questions about seed-create-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a new component in the SEED Design System?▼

Start by checking the component map for existing implementations, then decide the target platform (react, lynx, or cross-platform) and delivery surface. Run the scaffold-plan script to produce a file plan, then implement only the needed layers: headless, Rootage tokens, recipe, styled UI, registry, docs, and examples.

How do I choose between React and Lynx component implementation?▼

Use the platform gate signals: requests mentioning @lynx-js/react, native view/text tags, or docs/content/lynx indicate Lynx, while @seed-design/react and Storybook indicate React. Cross-platform work shares token vocabulary and API semantics but keeps separate implementations and documentation per runtime.

When should a component get a registry snippet versus package-only export?▼

Use package-only when the package export is already the user-facing API and a wrapper adds no composition or state value. Add a snippet only when it meaningfully reduces boilerplate, such as combining three or more sub-components, injecting default icons, or integrating third-party dependencies.

Does Lynx support the same accessibility APIs as React web components?▼

No. Lynx uses native accessibility-* attributes like accessibility-label, accessibility-role-description, and accessibility-value instead of DOM ARIA. Unsupported web features such as hidden inputs, keyboard focus models, and asChild are removed from Lynx types and documented as platform differences.

Why should generated files not be edited directly in this repository?▼

Generated files such as packages/css/vars outputs are produced from source definitions in Rootage and presets. Edit the source files, run the repository's generate commands, and confirm with git check-attr linguist-generated whether a path is a generated artifact before modifying it.

Related Skills

Explore More Software Engineering Skills→
keystone-uikeystone-ui
3

component-architecture

Define structural conventions for Keystone UI component files.

Official
Advanced
module-federationmodule-federation
2.6k

changeset-pr

Create and verify `.changeset/*.md` files for pull requests in a monorepo.

Official
Advanced
sonofmagicsonofmagic
1.9k

weapp-tailwindcss-lynx

Configures Tailwind CSS 4 for ReactLynx and Rspeedy native styling builds.

Community
Intermediate
leboncoinleboncoin
92

create-storybook-docs

Generate and update Storybook stories and MDX docs for Spark UI components.

Official
Basic