plugin87
- 38 skills
- 0 followers
- last month last updated
- ▌ Design Fundamentals 2 · plugin87 bundleMaster universal design principles for UI, web, and applications. Use this skill whenever you need to apply color theory, typography, layout systems, spacing, visual hierarchy, or contrast guidelines. Triggers include design critiques, UI specs, accessibility concerns, design system foundations, responsive layout problems, and questions about why something doesn't look right. Essential for both designers and frontend developers building pixel-perfect, accessible interfaces.
- ▌
- ▌
- ▌ Design Tokens System 2 · plugin87Comprehensive design token architecture and system implementation. Use this skill for token definition and structure, token generation and transformation, design token distribution across platforms, Figma Variables, design token sync automation, and multi-platform token consumption (web, mobile, docs).
- ▌
- ▌
- ▌
- ▌ Component Library Mastery 2 · plugin87Build and maintain production component libraries with Storybook. Use this skill for component documentation, Storybook setup and configuration, component publishing, versioning strategies, component distribution via npm, component API documentation, and library maintenance.
- ▌ Deployment Devops Workflow 2 · plugin87CI/CD pipelines, deployment automation, and monitoring for design systems. Use this skill for GitHub Actions workflow setup, automated testing and building, deployment strategies, versioning and tagging, rollback procedures, performance monitoring, and team collaboration in deployment pipelines.
- ▌ QA Testing Visual Regression 2 · plugin87Visual regression testing and pixel-perfect quality assurance. Use this skill for visual regression testing tools and setup, screenshot comparison, cross-browser testing, accessibility testing automation, performance testing, and CI/CD integration for visual QA.
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌ Design Fundamentals · plugin87 bundleMaster universal design principles for UI, web, and applications. Use this skill whenever you need to apply color theory, typography, layout systems, spacing, visual hierarchy, or contrast guidelines. Triggers include design critiques, UI specs, accessibility concerns, design system foundations, responsive layout problems, and questions about why something doesn't look right. Essential for both designers and frontend developers building pixel-perfect, accessible interfaces.
- ▌ Design Tokens System · plugin87Comprehensive design token architecture and system implementation. Use this skill for token definition and structure, token generation and transformation, design token distribution across platforms, Figma Variables, design token sync automation, and multi-platform token consumption (web, mobile, docs).
- ▌
- ▌
- ▌
- ▌
- ▌
- ▌ Component Library Mastery · plugin87Build and maintain production component libraries with Storybook. Use this skill for component documentation, Storybook setup and configuration, component publishing, versioning strategies, component distribution via npm, component API documentation, and library maintenance.
- ▌
- ▌
- ▌ Deployment Devops Workflow · plugin87CI/CD pipelines, deployment automation, and monitoring for design systems. Use this skill for GitHub Actions workflow setup, automated testing and building, deployment strategies, versioning and tagging, rollback procedures, performance monitoring, and team collaboration in deployment pipelines.
- ▌
- ▌
- ▌ QA Testing Visual Regression · plugin87Visual regression testing and pixel-perfect quality assurance. Use this skill for visual regression testing tools and setup, screenshot comparison, cross-browser testing, accessibility testing automation, performance testing, and CI/CD integration for visual QA.
- ▌
- ▌ Design Lazyyy Figma · plugin87Use the Design Lazyyy Figma MCP server (this repo) to read and write Figma files via Claude — design-system analysis, token/variable CRUD, node manipulation, accessibility audits, and asset export. Trigger when working with Figma through this MCP's figma_* tools, when figma_execute throws "expecting ;", when write tools report "Desktop Bridge not connected", or when connecting from Claude Desktop / Cowork.
- ▌ Design Code · plugin87Generate production-ready, accessible, token-driven component code for ANY framework — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS. Use when the user wants working UI code for a component or screen in a specific stack.
- ▌ Token Build · plugin87Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.
- ▌ A11Y Audit · plugin87Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.
- ▌ Governance · plugin87Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.
- ▌ UX Writing · plugin87Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.
- ▌ Design QA · plugin87Set up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when the user wants CI quality gates, to prevent design regressions, or to QA a component/screen before shipping.
- ▌ Brandkit · plugin87Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.