Smarthr Design System
- 53 repo stars
- Updated July 28, 2026
- kufu/smarthr-design-system
smarthr-design-system is a Claude Code plugin that distributes per-component SmartHR UI skills with props, rules, and usage checks so developers and agents implement the design system consistently.
About
smarthr-design-system is a Claude Code marketplace plugin distributing AI-agent skills for SmartHR UI components—props, ESLint rules, checklists, and usage guidance synthesized from the official design system. Developers reach for it when building or refactoring React interfaces that must follow SmartHR UI conventions and pass design-system lint rules. Skills are generated from metadata, eslint-plugin-smarthr READMEs, and component checklists rather than hand-maintained per file.
- Per-component SKILL.md guides auto-synthesized from metadata, ESLint rules, and checklists
- Component selector and progressive-disclosure skill entry points for agents
- Distributed as a Claude Code marketplace plugin from kufu/smarthr-design-system
- Covers props, implementation rules, and usage verification for smarthr-ui
- Targets Claude Code, Cursor, and other agents loading .claude/skills
Smarthr Design System by the numbers
- Data as of Jul 28, 2026 (Skillselion catalog sync)
/plugin marketplace add kufu/smarthr-design-systemAdd your badge
Show developers this marketplace is listed on Skillselion. Paste this into your README.
| repo stars | ★ 53 |
|---|---|
| Last updated | July 28, 2026 |
| Repository | kufu/smarthr-design-system ↗ |
How do I make Claude Code apply correct SmartHR UI component APIs and lint rules instead of generic React patterns?
Provides Claude Code skills with per-component SmartHR UI usage guides, props, ESLint rules, and implementation checks for consistent frontend work.
Who is it for?
Frontend developers building products with smarthr-ui who want agent-ready component guides aligned to the official design system.
Skip if: Teams not using SmartHR UI or React component libraries from the kufu design system.
What you get
Agent-loaded component skills with accurate props, ESLint constraints, checklist-backed usage rules, and component-selection guidance during UI work.
Plugins in this marketplace
1 plugin - install individually after you add the marketplace.
Recommended Marketplaces
FAQ
Where do the component skills come from?
They are auto-synthesized from metadata.json, eslint-plugin-smarthr rule READMEs, and component checklist YAML in the design-system repo.
Which agents can use these skills?
Claude Code, Cursor, and any tool that loads SKILL.md files from .claude/skills or equivalent skill directories.
Should I edit the generated component markdown directly?
No—update the source metadata, ESLint rules, or checklists and regenerate via scripts/generate-skills rather than editing outputs.