with one click
Sigil-UI
Sigil-UI contains 5 collected skills from Kevin-Liu-01, with repository-level occupation coverage and site-owned skill detail pages.
Skills in this repository
Consolidated reference for the @sigil-ui/cli command surface (init, convert, add, preset, design, inspire, adapter, docs, diff, doctor). Use when looking up what a CLI command does, picking between `sigil init` and `sigil convert`, scaffolding a new project, switching presets, generating DESIGN.md, validating a project, or any task that reaches for `npx @sigil-ui/cli`. Triggers on "sigil cli", "sigil init", "sigil convert", "sigil add", "sigil preset", "sigil design", "sigil doctor", "sigil diff", "sigil inspire", "sigil adapter", "sigil docs", "create-sigil-app", or "what does X do".
Generate, parse, and compile a unified DESIGN.md (33 categories, 519 tokens) that compiles to CSS, Tailwind v4, and W3C JSON. Use when creating a new design reference, extracting tokens from an existing site (`sigil design extract`), switching a project's visual identity, generating compiled token output, or auditing a design against the spec. Triggers on "DESIGN.md", "design reference", "compile tokens", "extract design system", "sigil design", or "design.md format".
Canonical source of truth for Sigil positioning, copy, stats, naming, and tone. Use when writing or updating any README, docs page, marketing surface, llms.txt, social post, or agent-generated copy that mentions Sigil. Triggers on "Sigil messaging", "Sigil copy", "what is Sigil", "Sigil positioning", "Sigil stats", "Sigil tagline", or any task that produces text describing the product.
Author and extract `*.scene.tsx` files for animated or stateful blocks of an `apps/web` page. Use when extracting a self-contained visual/animated block from a long page file (the goal is one scene per file, page composes scenes), creating a new animation/diagram block, or refactoring a god file into scene-shaped modules. Triggers on "scene file", "extract scene", "animation suite", "PresetMorphScene", "scene convention", "componentize a page", or any task that involves moving inline JSX with state + animation out of a page file.
Design engineering principles for making Sigil interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.