frontend

name

frontend

description

Comprehensive frontend development hub — UI/UX design, React/Next.js patterns, Tailwind CSS v4, shadcn/ui components, Three.js 3D graphics, creative web experiences, data visualization, diagramming, Figma integration, accessibility, game development, scroll animations, and design systems. Use for ANY frontend task: building components, designing interfaces, styling, theming, animations, charts, responsive layouts, mobile design, or implementing design patterns.

Frontend Development Hub

This skill is an index of specialized frontend sub-skills. Do NOT read every sub-skill. Instead:

1. Scan the categories below to find what's relevant to the current task
2. Read only the specific SKILL.md file(s) needed via their relative path
3. Follow the instructions in that sub-skill

Multiple sub-skills can be combined for a single task (e.g. shadcn + frontend-patterns for building CampusOS UI).

---

Core — CampusOS Patterns

Project-specific frontend conventions and framework best practices.

Sub-Skill	Read	Use When
Frontend Patterns	./core/frontend-patterns/SKILL.md	Building React components with CampusOS conventions, App Router, Tailwind CSS v4, react-hook-form + Zod
React Best Practices	./core/vercel-react-best-practices/SKILL.md	Optimizing React/Next.js performance, data fetching, bundle size, code splitting

---

Components — Frameworks & Libraries

Pre-built component libraries and design system tooling.

Sub-Skill	Read	Use When
shadcn/ui	./components/shadcn/SKILL.md	Adding, searching, fixing, debugging, or styling shadcn/ui components; working with registries, presets, or components.json
Tailwind Design System	./components/tailwind-design-system/SKILL.md	Building scalable design systems with Tailwind CSS v4 — design tokens, component libraries, responsive patterns

---

Design — Visual & UX

Design principles, UI/UX patterns, accessibility, and theming.

Sub-Skill	Read	Use When
Frontend Design	./design/frontend-design/SKILL.md	Creating distinctive, production-grade interfaces; avoiding generic AI aesthetics
UI/UX Pro Max	./design/ui-ux-pro-max/SKILL.md	Comprehensive UI/UX design intelligence — 50+ styles, 161 palettes, 57 font pairings, 25 chart types across 10 stacks
Web Design Guidelines	./design/web-design-guidelines/SKILL.md	Reviewing UI for Web Interface Guidelines compliance, accessibility audits, UX review
Premium Web Design	./design/premium-web-design/SKILL.md	Building premium, polished web experiences
UI Design System	./design/ui-design-system/SKILL.md	Design token generation, component documentation, responsive calculations, developer handoff
UX Research & Design	./design/ux-researcher-designer/SKILL.md	User research, persona creation, journey mapping, usability testing, design validation
Mobile Design	./design/mobile-design/SKILL.md	Mobile-first design, touch interactions, platform conventions for React Native, Flutter, or native
Theme Factory	./design/theme-factory/SKILL.md	Styling artifacts with themes — slides, docs, HTML pages; 10 preset themes with colors/fonts
Tailwind Patterns	./design/tailwind-patterns/SKILL.md	Advanced Tailwind CSS v4 patterns — CSS-first config, container queries, design tokens
Accessibility Auditor	./design/accessibility-auditor/SKILL.md	WCAG compliance, accessibility testing, screen reader optimization

---

Creative — Interactive Experiences

Specialized tools for creative, interactive, and generative web projects.

Sub-Skill	Read	Use When
3D Web Experience	./creative/3d-web-experience/SKILL.md	Building immersive 3D web experiences
Scroll Experience	./creative/scroll-experience/SKILL.md	Scroll-driven animations, parallax storytelling, cinematic web experiences (like Apple/NYT)
D3.js Data Viz	./creative/claude-d3js-skill/SKILL.md	Data visualization with D3.js
Canvas Design	./creative/canvas-design/SKILL.md	HTML5 Canvas, 2D graphics, custom visualizations
Algorithmic Art	./creative/algorithmic-art/SKILL.md	Generative art, procedural graphics, creative coding
Remotion Video	./creative/remotion-best-practices/SKILL.md	Programmatic video creation with React (Remotion)
Web Game Dev	./creative/develop-web-game/SKILL.md	Browser-based game development
Game Development	./creative/game-development/SKILL.md	Game design patterns, physics, game loops
Interactive Portfolio	./creative/interactive-portfolio/SKILL.md	Building interactive portfolio sites
Image Generation	./creative/imagegen/SKILL.md	AI image generation integration
Luma Image Gen	./creative/luma-imagegen/SKILL.md	Luma AI image generation
Meme Factory	./creative/meme-factory/SKILL.md	Meme creation and image manipulation
Slack GIF Creator	./creative/slack-gif-creator/SKILL.md	Animated GIFs optimized for Slack
Marp Slides	./creative/marp-slide/SKILL.md	Markdown-based presentation slides with Marp
Marketing Campaigns	./creative/executing-marketing-campaigns/SKILL.md	Marketing page design and campaign assets

---

Diagrams — Visualization & Documentation

Diagramming, charting, and architecture visualization tools.

Sub-Skill	Read	Use When
Diagrammer	./diagrams/diagrammer/SKILL.md	General-purpose diagramming
Draw.io	./diagrams/draw-io/SKILL.md	Draw.io / diagrams.net diagrams
Excalidraw	./diagrams/excalidraw/SKILL.md	Hand-drawn style diagrams with Excalidraw
Mermaid Diagrams	./diagrams/mermaid-diagrams/SKILL.md	Mermaid.js syntax and patterns
C4 Architecture	./diagrams/c4-architecture/SKILL.md	C4 model architecture diagrams

---

Figma — Design Tool Integration

Sub-Skill	Read	Use When
Figma	./figma/figma/SKILL.md	Working with Figma files, design tokens, assets
Figma to Code	./figma/figma-implement-design/SKILL.md	Implementing Figma designs in code

---

Three.js — 3D Graphics

Complete Three.js reference for 3D web applications. Start with Fundamentals, then load topic-specific skills as needed.

Sub-Skill	Read	Use When
Fundamentals	./threejs/threejs-fundamentals/SKILL.md	Scene setup, cameras, renderer, Object3D hierarchy, coordinate systems
Geometry	./threejs/threejs-geometry/SKILL.md	Built-in shapes, BufferGeometry, custom geometry, instancing
Materials	./threejs/threejs-materials/SKILL.md	PBR, shader materials, material properties
Lighting	./threejs/threejs-lighting/SKILL.md	Light types, shadows, environment lighting, IBL
Textures	./threejs/threejs-textures/SKILL.md	Texture types, UV mapping, environment maps, optimization
Animation	./threejs/threejs-animation/SKILL.md	Keyframe animation, skeletal animation, morph targets, mixing
Interaction	./threejs/threejs-interaction/SKILL.md	Raycasting, controls, mouse/touch input, object selection
Shaders	./threejs/threejs-shaders/SKILL.md	GLSL, ShaderMaterial, uniforms, custom effects
Post-Processing	./threejs/threejs-postprocessing/SKILL.md	EffectComposer, bloom, DOF, screen effects
Loaders	./threejs/threejs-loaders/SKILL.md	GLTF loading, textures, HDR environments, async patterns