bitjaru/styleseed
15 skills3.5k installs13k starsGitHub
Install
npx skills add https://github.com/bitjaru/styleseedSkills in this repo
1Ss A11yss-a11y is an accessibility audit skill that reviews a component or page against WCAG 2.2 AA criteria and fixes issues. It checks color contrast, touch-target size, keyboard navigation, form labels, and semantic HTML, applying auto-fixes where possible. A developer uses it as a static code audit on StyleSeed components before shipping.253installs2Ss Setupss-setup is a StyleSeed skill that runs an interactive wizard to configure the design system for a project. A developer uses it once to pick an app type, brand color, optional brand design concept, and font, then generate a first page from a matching composition recipe. It writes the choices into theme and font CSS and records them in a STYLESEED.md design lock the agent re-reads on every prompt.253installs3Ss Reviewss-review is a StyleSeed skill that reviews UI code for design-system compliance, accessibility, and best practices. A developer uses it for a deeper manual audit than the quick ss-lint scan, covering tokens, component conventions, a11y, mobile behavior, performance, typography, spacing, and one-choice-per-axis coherence. It returns a pass, needs-improvement, or fail score with each violation referenced by file and line plus concrete fixes.252installs4Ss Auditss-audit is a StyleSeed skill that reviews an existing screen or file for UX problems using Nielsen's 10 usability heuristics and mobile-specific checks. A developer runs it to find usability issues like missing loading states, unclear feedback, tiny touch targets, unsafe notch areas, and dark patterns. It returns a graded report with critical, major, and minor issues plus recommended code changes.251installs5Ss Lintss-lint is a StyleSeed skill that runs a quick grep-based scan for common design-system violations in a file or directory. A developer runs it after every file change to catch hardcoded colors, raw pixel values, old width/height syntax, physical margin properties, and missing data-slot attributes. It prints a pass, warn, or fail line for each issue with the exact token or class to use instead.249installs6Ss Feedbackss-feedback is a StyleSeed skill that adds the four user-feedback states (loading, empty, error, and success) to a component or page. A developer uses it to make every data-dependent area handle its full lifecycle instead of only the happy path. It generates skeleton loaders, empty states with a call to action, retry-enabled error views, and toast confirmations.247installs7Ss UpdateThis skill detects an outdated StyleSeed install in a project and updates the engine files safely. It compares the local version against the published version.json, then adds new rules, components, skins, and skills without overwriting the user's theme.css or components. A developer runs it to bring an existing StyleSeed setup up to date.247installs8Ss Pagess-page is a StyleSeed skill that scaffolds a new mobile page or screen using the design system's layout patterns. A developer uses it to create a full screen composed from PageShell, TopBar, and BottomNav with the correct container width, spacing, cards, and safe-area padding. After generating the page it verifies the result against the Golden Rules and fixes any violation before presenting it.229installs9Ss Componentss-component is a StyleSeed skill that generates a new React UI component matching the design system's conventions. A developer uses it when building on a StyleSeed project to scaffold a primitive or pattern that follows the token, typography, and accessibility rules. It reads the theme and reference components first, then writes a component using function declarations, cn() class merging, CVA variants, and semantic color tokens.225installs10Ss Copyss-copy is a StyleSeed skill that writes UX microcopy such as button labels, error messages, empty states, and toast notifications. A developer uses it while building an interface to get short interface text that follows a consistent casual-but-polite voice. It applies per-context patterns like action-verb CTAs, plain-language errors that suggest a fix, and undo-enabled toasts.225installs11Ss Motionss-motion is a StyleSeed skill that applies a named motion to a React component as framer-motion code. A developer uses it to translate vibe words like bouncy or snappy, a brand style, or a use case like a modal or like button into one of five motion seeds or a distinctive keyword move. It pulls the calibrated snippet from the motion library so animations stay consistent across the product.225installs12Ss TokensThis skill views, adds, and updates design tokens (colors, typography, spacing, radius, shadows) in the StyleSeed design system. A developer uses it while building UI to keep the JSON token sources and their CSS custom-property implementations in sync. It targets Tailwind v4 and CSS variables only.225installs13Ss Flowss-flow is a StyleSeed skill that designs a user flow and its navigation structure using established UX patterns. A developer uses it before implementing individual pages to map screens, entry and exit points, and edge cases for one flow. It outputs an ASCII flow diagram, a screen inventory, and scaffolded pages using the design system's shell patterns.224installs14Ss Patternss-pattern is a StyleSeed skill that generates a composed UI pattern such as a card section, grid, list, form section, data table, or action sheet. A developer uses it to assemble a reusable multi-component block from existing design-system primitives rather than a single component or a whole page. It follows the system's card, spacing, and token rules and exposes props for dynamic content.224installs15Ss Scoress-score is a StyleSeed skill that scores a UI file's design quality from 0 to 100 with a per-category breakdown and a prioritized fix list. A developer uses it as a quantified version of ss-review to track UI quality like test coverage and see what to fix first for the biggest gain. It can run as a quality gate loop, applying the fix-first list and re-scoring until the file reaches at least 80.210installs