17 installable agent skills for distinctive web design: art direction, implementation, critique, accessibility, and visual QA for Codex, Claude Code, and Cursor.
This repository also configures its own agents. See what world-class-web-design-os tells them →
Lrinvl1203/world-class-web-design-os
Skill Codex
Use for release-level accessibility and performance review, including WCAG 2.2 AA, keyboard/focus, target size, reduced motion, semantic controls, Core Web Vitals, images/fonts/JavaScript, and animation or 3D performance budgets.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use to audit a generated or heavily templated interface for generic AI aesthetics, unjustified trend patterns, component-registry residue, vague copy, repetitive motion, novelty theater, or visual decisions that lack brand/UX rationale.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use when a website needs a strong visual point of view, distinct concept routes, composition, typography, color/materiality, imagery direction, spatial rhythm, or a memorable signature idea.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use when deciding whether to implement UI from native HTML/CSS, accessible primitives, shadcn-style source components, or visual component registries such as 21st.dev, Aceternity, React Bits, Motion Primitives, Magic UI, or Animate UI.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use after substantial web projects or repeated design defects to convert evidence into reusable skill improvements through root-cause analysis, regression scenarios, and controlled proposals without silently changing the core OS.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use when the design concept calls for Three.js or React Three Fiber 3D, WebGL/WebGPU, Rive, Spline, Theatre.js, SVG, canvas, shaders, particle systems, or other immersive creative-web techniques.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use as an independent design-review pass after rendering a website; evaluates macro, meso, micro craft, applies the Design Quality rubric, identifies root causes, and prioritizes changes without defending the implementation intent.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use when a web project needs business goals, audience, information architecture, conversion priorities, content hierarchy, constraints, or design CTQs clarified before visual design begins.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use when turning an art direction into reusable design tokens, typography, spacing, layout, surface, component, state, motion, responsive, or content rules before or during implementation.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use when converting a design direction into maintainable production frontend code, selecting architecture within the existing stack, implementing semantics, assets, loading behavior, CSS/layout, components, and progressive enhancement.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use when designing interface states, feedback, hover/focus/press, gestures, direct manipulation, navigation transitions, loading/error/empty behavior, or deciding where interaction should carry the design concept.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use when a web project needs animation or motion-tool selection across native CSS/WAAPI/View Transitions, Motion, Anime.js, GSAP, Lenis, scroll choreography, SVG/text animation, or synchronized motion systems.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use when screenshots, websites, moodboards, competitors, or visual examples are provided and the task needs design DNA extraction, comparison, remixing, or translation into an original design direction.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use for dedicated mobile, tablet, ultrawide, touch, or breakpoint design passes where content priority, layout, navigation, imagery, interaction, and motion must be recomposed rather than simply resized.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use for a focused high-craft polish pass after structure and art direction are stable; improves typography metrics, spacing rhythm, imagery crop, surfaces, optical alignment, micro-interactions, and restrained detail without redesigning the whole page.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use when a website needs rendered screenshot review, Playwright visual regression, multi-viewport checks, horizontal overflow detection, console-error checks, focus/state inspection, or a repeatable visual QA evidence set.
Lrinvl1203/world-class-web-design-os
Skill Codex
Use for end-to-end website or interface design, redesign, implementation, or major visual polish; orchestrates discovery, references, art direction, systems, build, critique, QA, and release gates.
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: