From shipshitdev-frontend
Audits design system consistency including Tailwind color tokens, UI patterns, spacing scale, typography, accessibility, and best practices in frontend apps.
npx claudepluginhub shipshitdev/libraryThis 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.
Audits design system consistency including Tailwind color tokens, UI patterns, spacing scale, typography, accessibility, and best practices in frontend apps.
Generates design systems and tokens from CSS/Tailwind/styled-components codebases, audits UI consistency across 10 dimensions, detects AI-generated patterns. Use for new projects, redesigns, PR reviews.
Generates design systems from codebases by extracting tokens and creating previews, audits UI consistency across 10 dimensions, detects AI-generated slop, and reviews styling PRs.
Share bugs, ideas, or general feedback.
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