skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

component-authoring

Guide component creation and refactoring for @techsio/ui-kit with tokens and Storybook.

2|Updated Dec 2, 2024
Search Tags:#workflow#react#patterns#storybook#tokens#ui-kit#component-authoring
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill component-authoring-techsiocz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-authoring
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/component-authoring
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill component-authoring-techsiocz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes how developers create and refactor components in libs/ui, ensuring consistency, reusability, and alignment with tokens, stories, and exports.

Core Features & Use Cases

  • Centralizes guidelines for atoms, molecules, organisms, tv() variants, and tokens CSS.
  • Enforces public subpath imports and correct Storybook integration.
  • Provides handoff reminders to align with Figma and design handoffs for production.

Quick Start

Follow the component-authoring workflow to create or refactor a UI component with tokens, stories, and public subpath exports.

Frequently Asked Questions about component-authoring

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

FAQPage Schema
How do I standardize React UI component authoring for atoms, molecules, and organisms?▼

Standardize React UI component authoring by following a consistent guide for creating and refactoring atoms, molecules, and organisms. This enforces structural alignment with tokens, stories, and public subpath exports across your UI library.

What is the workflow for setting up Storybook stories and tokens for a new component?▼

The component-authoring workflow involves setting up tokens CSS, integrating Storybook stories, and ensuring public subpath imports. It codifies core patterns and validation checks to align components with design system requirements.

Does this component authoring guide support Figma handoff guidelines?▼

Yes, the component authoring guide provides handoff reminders to align with Figma designs. It ensures production components match design handoffs within the libs/ui directory structure.

How do I enforce public subpath imports when refactoring UI components?▼

Enforce public subpath imports when refactoring UI components by following validation checks outlined in the component authoring guide. This ensures correct metadata, structural needs, and component token usage are maintained.

Related Skills

Explore More Software Engineering Skills→
lsst-sqrelsst-sqre
2

migrate-styled-components-to-css-modules

Migrate React components from styled-components to CSS Modules with design tokens.

Official
Intermediate
Prathmesh2000Prathmesh2000
1

storybook-writer

Generate CSF3 Storybook stories with interaction tests, a11y checks, and Chromatic setup.

Community
Advanced
dylantarredylantarre
38

figma

Synchronize design tokens between codebases and Figma bidirectionally via API workflows involving Tokens Studio or Variables.

Community
Intermediate
scalarscalar
15.9k

scalar-design-system

Document Scalar design tokens, theming, and component mappings.

Official
Intermediate