Agent Skills
Each of these 45 Agent Skills encodes one term of the architecture as a
SKILL.md: the rules, code patterns and quality gates a coding agent follows when it
writes that part of your app. Install one into your agent with the command on its card, or
download the file for any runtime that reads Agent Skills.
UI (16) · Server (20) · State (9)
UI
-
Accessibility
Accessibility (a11y) isn't an "add-on" feature—it's fundamental architecture.
-
Atom
Atoms are the fundamental building blocks of your UI system—think of them as LEGO bricks that do one thing exceptionally well.
-
Atomic Design
Atomic Design isn't a step-by-step process ("first make all atoms, then molecules...")—it's a mental model for thinking about UI hierarchy.
-
Attributes
Attributes are the "settings panel" for HTML elements—they don't change what an element is (a button is still a button), but they configure how it behaves,…
-
Component
Components are the fundamental building blocks of modern web applications—self-contained, reusable pieces of UI that encapsulate structure (HTML), styling…
-
DOM
The DOM is the "living blueprint" of your webpage—it's not the HTML file you wrote, but the browser's in-memory tree structure built from that HTML, and it…
-
Element
Understanding the distinction between elements, components, and DOM nodes is crucial: a component is a blueprint (function or class), an element is a…
-
Events
Events are the browser's way of saying "something happened" — not just clicks, but scrolls, hovers, form submissions, page loads, network responses,…
-
Molecule
Molecules are where atoms come together to form functional UI patterns—think of a search bar (input + button + icon) or a form field (label + input + error…
-
Organism
Organisms are where your UI becomes truly functional—they're complex components that combine molecules and atoms into cohesive interface sections like…
-
Props
Props are the contract between a component and its users—they define what data a component accepts, how it behaves, and how it communicates back to parent…
-
Responsive Web Design
Responsive Web Design isn't about making separate mobile and desktop sites—it's about building one flexible site that adapts to any screen size.
-
Skeleton
Skeleton screens transform the psychological experience of waiting—instead of staring at blank screens or generic spinners while content loads, users see a…
-
Story
A Storybook story is a component development snapshot—capturing one specific visual state with precise props and data.
-
Template
Templates are the IKEA shelf; pages fill it with books.
-
Theme
Themes are systematic design languages implemented through CSS—not just colors, but comprehensive design token systems covering typography, spacing, shadows,…
Server
-
API
API services are the bridge between your frontend and backend—your application's nervous system coordinating all data flow with consistency, error handling,…
-
App Shell
The App Shell model inverts traditional server-rendering by caching the application infrastructure (shell) on first visit and streaming only data on…
-
Authentication
Authentication in SPAs uses token-based systems (JWT) stored in memory or httpOnly cookies, where login returns an access token (short-lived, 15 min) and…
-
Container
Container components are smart wrappers that handle data and logic, while presentational components are dumb renderers that handle UI.
-
Forms
Controlled components in React mean form inputs are driven by React state (value={email} + onChange={e => setEmail(e.target.value)}), making React the single…
-
Images
Modern image optimization combines responsive images (
+ srcset), lazy loading (loading="lazy"), next-gen formats (WebP/AVIF with JPEG fallback), and…</p> </li> Index file
The index file is the entry point contract between servers and applications—when you visit example.com/folder, the server automatically looks for…
Links
Links are the fundamental building blocks of the web—navigation between resources that transforms isolated documents into an interconnected information network.
Localization
Localization (i18n/L10n) in frontend applications extends beyond translating strings—it requires internationalization architecture supporting dynamic language…
Micro Frontend
Micro-frontends extend microservices architecture to the UI layer, decomposing monolithic frontends into independently deployable, framework-agnostic modules…
Page
Pages are the concrete instances of templates filled with real content—they're where abstract layout patterns meet actual data to create what users see and…
Protocol
Protocols define the rules of conversation between clients and servers, and the single most important shift in the modern web is HTTP to HTTPS.
Proxy
A proxy server acts as an intermediary between your frontend and backend, solving the fundamental CORS (Cross-Origin Resource Sharing) problem in development:…
Progressive Web App
Progressive Web Apps turn ordinary websites into installable, offline-capable, push-notifying apps — without an app store.
Router
Client-side routers enable Single Page Applications (SPAs) to navigate without full page reloads by intercepting link clicks and updating the URL using the…
Search Engine Optimization
SEO for frontend applications centers on making JavaScript-rendered content discoverable and crawlable by search engines through server-side rendering,…
Session
Session management balances stateless authentication (JWTs for API authorization) with stateful user experience (preferences, cart, form drafts surviving…
Static Site Generation
Static Site Generation (SSG) pre-renders pages at build time into HTML files served instantly from CDNs, delivering blazing-fast page loads (50-100ms vs…
Server Side Rendering
Server-Side Rendering (SSR) transforms your application from a blank page that loads slowly into a fully-rendered HTML document delivered instantly from the…
Widget
Widgets solve the distribution problem by packaging functionality into an embeddable snippet that loads asynchronously, renders in an isolated context (iframe…
State
-
Actions
Actions are the "events" in your application's event-driven architecture—they don't tell the state how to change, they simply announce "user clicked login…
-
AJAX
AJAX in a state-managed app is plumbing, not policy.
-
CRUD
A CRUD action name has two axes: the verb (what the user wants) and the lifecycle phase (where in the round-trip we are).
-
Middleware
Middleware is Redux's "plugin system"—it intercepts every action between dispatch and reducer, enabling async operations (API calls), logging, crash…
-
Operations
Reducers are the what; operations are the how.
-
Reducers
Reducers transform Redux from "just another state container" into a predictable state machine—every state transition is a pure function, meaning given the…
-
Selectors
Selectors are the "computed properties" of Redux—they transform raw state into the exact shape your components need, and memoization ensures expensive…
-
State Basics
State is the memory of your application—every piece of data that changes over time, from user inputs to API responses to UI toggles.
-
Store
A store is your application's single source of truth—a centralized state container that every component can access without prop drilling, ensuring consistent…