design-system-generator
Design System Generator
Overview
This skill generates a project-specific DESIGN_SYSTEM.md that enforces consistent UI/UX across:
- SPAs (React/Vue/Svelte/Angular)
- Traditional server-rendered sites (Laravel, Rails, Django, WordPress, etc.)
- Hybrid systems (admin + marketing + docs)
The design system must be component-based, portable, and practical for real implementation.
When to use this skill:
- Setting up UI consistency rules for a new project
- Standardizing component patterns across teams
- Establishing design tokens (colors, typography, spacing)
- Defining accessibility and performance requirements
Interactive Workflow
More from thienanblog/awesome-ai-agent-skills
laravel-11-12-app-guidelines
Guidelines and workflow for working on Laravel 11 or Laravel 12 applications across common stacks (API-only or full-stack), including optional Docker Compose/Sail, Inertia + React, Livewire, Vue, Blade, Tailwind v4, Fortify, Wayfinder, PHPUnit, Pint, and Laravel Boost MCP tools. Use when implementing features, fixing bugs, or making UI/backend changes while following project-specific instructions (AGENTS.md, docs/).
734docker-local-dev
Generate Docker Compose and Dockerfile configurations for local development through interactive Q&A. Supports PHP/Laravel, WordPress, Drupal, Joomla, Node.js, and Python stacks with Nginx, Supervisor/PM2, databases, Redis, and email testing. Always asks clarifying questions before generating configurations.
54agents-md-generator
Generate or update CLAUDE.md/AGENTS.md files for AI coding agents through auto-scanning project files combined with interactive Q&A. Supports multiple tech stacks, development environments, and preserves customizations when updating.
32documentation-guidelines
Write or update backend feature documentation that follows a repo's DOCUMENTATION_GUIDELINES.md (or equivalent) across any project. Use when asked to create/update module docs, API contracts, or backend documentation that must include architecture, endpoints, payloads, Mermaid diagrams, and seeding instructions.
31ask-questions-if-underspecified
Clarify requirements before implementing. Do not use automatically, only when invoked explicitly.
28office-web-ui-system
Design and refactor polished office-style web app interfaces for admin, internal, and back-office products. Use when an AI agent needs to build or improve dashboards, stat cards, page heroes, filter/search bars, data tables, shells, side panels, semantic locator classes, or reusable page composition that stays portable across Vue, React, Laravel, and other web stacks with or without PrimeVue.
9