mb-fe-dev
CommunityBuild accessible, token-driven UI components fast
AuthorYanick-mj
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Frontend development in the mb-framework often suffers from inconsistent design token usage, lack of accessibility, and ad‑hoc component creation, leading to technical debt and UI inconsistencies.
Core Features & Use Cases
- Component Audit: Automatically scans design tokens, existing components, and UI references before any code changes.
- Atomic Design Enforcement: Guides creation of atoms, molecules, organisms, templates, and pages according to a strict hierarchy.
- Design Token Compliance: Ensures all styling derives from the project's design system, preventing hard‑coded values.
- Accessibility Assurance: Embeds WCAG‑compliant checks and ARIA requirements into the development flow.
- Test‑Driven Development: Generates failing tests from templates, runs red‑green‑refactor cycles for every UI addition.
Quick Start
Create a responsive Card component following the existing design tokens and atomic design guidelines.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: mb-fe-dev Download link: https://github.com/Yanick-mj/mb-framework/archive/main.zip#mb-fe-dev Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.