From productionos
ProductionOS frontend quality scanner. Auto-activates when editing React/Vue/Svelte components, CSS, or layout files. Checks accessibility, responsive design, performance, and design system consistency.
npx claudepluginhub shaheerkhawaja/productionos --plugin productionosThis skill uses the workspace's default tool permissions.
When this skill activates on a frontend file:
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
When this skill activates on a frontend file:
any, proper interfaces for props| Dimension | What to Check |
|---|---|
| Visual Design | Color system, typography, spacing, hierarchy, dark mode |
| Component Architecture | Composition, reusability, state management |
| Performance | Bundle size, LCP, FID, CLS, lazy loading |
| Accessibility | WCAG 2.1 AA, keyboard nav, screen readers |
| Responsive | Mobile-first, breakpoints, touch targets |
| Animation | Transitions, micro-interactions, loading states |
| Error States | Empty, error, loading, offline, stale data |
| Code Quality | TypeScript strict, naming, DRY, file structure |