From shipshitdev-library
Audits design system consistency including Tailwind color tokens, UI patterns, spacing scale, typography, accessibility, and best practices in frontend apps.
npx claudepluginhub shipshitdev/skillsThis skill uses the workspace's default tool permissions.
Audit and maintain design consistency across frontend applications. Before auditing, discover the project's frontend structure from documentation.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
Audit and maintain design consistency across frontend applications. Before auditing, discover the project's frontend structure from documentation.
Ensures:
DO: Use semantic tokens (bg-primary, text-base-content, bg-base-100)
DON'T: Hardcode hex colors (#000000) or arbitrary values (bg-[#123456])
.gf-card.gf-app.glass-modal.glass-input, .form-focusbtn btn-primary, .btn-secondary, btn-ghostDO: Use Tailwind scale (p-4, m-6, gap-4)
DON'T: Use arbitrary values (p-[17px])
<button>, <nav>, <main>)focus:outline-none focus:ring-2 focus:ring-primarysm:, md:, lg:, xl: modifierstext-3xl sm:text-4xlAudit for generic "AI-generated" aesthetics:
Push for distinctive, branded designs with personality.
For detailed checklists, examples, reporting templates, and audit commands, see: references/full-guide.md