Design & UX Skill
Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns…
$15
Web Component Design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies…
A masterclass in building reusable, maintainable UI components across React, Vue and Svelte using clean composition patterns instead of prop explosion. It teaches compound components, render props, slots and headless architecture so behavior and presentation stay decoupled. The payoff is a component library you write once and reuse everywhere, with type-safe APIs that are hard to misuse.
$15 one-time
Add to a kit → Prices include 20% VAT. · Forged on real agency work · one-time, no lock-in
- Type Skill
- Category Design & UX
- Delivery Email · instant
- License One-time
Inside the run · no black box
See the actual work before you buy it.
If describing a component requires the word "and", it gets split. Designing a component library here means choosing the composition pattern before writing any code, then defending the API:
- Picks the composition pattern before any code: custom hooks first for logic sharing, compound components (Select.Trigger, Select.Options) for related parts, render props only when the consumer genuinely needs rendering control. HOC wrappers are banned in new code
- Designs the API defensively: variant unions instead of free strings, sensible defaultVariants so the component works with zero props, and isLoading automatically forcing disabled so conflicting states become impossible at compile time
- Implements with CVA variant maps plus forwardRef and a className escape hatch, so consumers can compose and override without wrapper div spam
- Layers the library atomically: buttons and inputs as atoms, search bars as molecules, headers as organisms, each layer consuming only the one below it, which is what keeps variant counts from exploding
- Splits responsibility per component: a UserCard renders, a DataFetcher fetches, and the test is simple: if describing the component requires the word and, it gets split
- Verifies the quality floor before shipping: ARIA and keyboard support, controlled and uncontrolled modes where relevant, memoization only after measuring, and full 4-state coverage with skeletons sized to the real content
One power source. 6 lines out.
web-component-design · core
core active · 6 lines
- ✓ designing a reusable com…
Designing a reusable component library or design system
- ✓ implementing compound co…
Implementing compound components and render props
- ✓ choosing the right css-i…
Choosing the right CSS-in-JS or utility styling approach
- ✓ refactoring monolithic 10+
Refactoring monolithic 10+ prop components into composition
- ✓ building accessible, key…
Building accessible, keyboard-operable custom widgets
- ✓ designing type-safe comp…
Designing type-safe component APIs with variant validation
Yours to keep.
Drag time forward. Watch what stays.
Forever
That's what owning means.
The rented stack
ai writing tool: subscription
expired · access lostanalytics suite: subscription
expired · access lostdesign platform: subscription
expired · access lost(nothing left)
Your forge
-
Cut duplicate component cost by writing behavior once and styling per context
license: perpetual -
Prevent invalid states at compile time with discriminated-union prop APIs
license: perpetual -
Avoid re-render cascades and runtime CSS-in-JS performance penalties
license: perpetual -
Ship accessible-by-default widgets with ARIA, focus management and 4 states
license: perpetual
subscriptions expire · deeds don't
Everything in the box.
Pick a piece up. Watch it work.
Compound component, render prop and slot patterns for React/Vue/Svelte
6 parts · one working system · ships instantly by email
This wasn't forged for everyone.
- Not for you if you'd rather rent a tool than own one.
- Not for you if you want someone else to run your stack.
- Not for you if you're happy guessing.
Front-end engineers and design-system owners building cross-framework component libraries with clean, reusable, type-safe APIs.
then this was forged for you.Works with
Universal by design: these run in any AI. Delivered in the open Agent Skills + MCP format (native in Claude); ChatGPT, Gemini, Cursor and Copilot adapt the same files their own way.
- Claude Native format
- ChatGPT Adapts via open standards
- Gemini Adapts via open standards
- Cursor Adapts via open standards
- Copilot Adapts via open standards
Catch what's on your mind.
the air is clear. nothing between you and the forge.
catch a spark: the forge will answer
-
I only write React. Does the Vue and Svelte coverage add anything for me?
The core patterns (compound components, render props, slots, headless architecture) are mapped per framework, so a React-only team simply uses the React column, including the class-variance-authority variant API with forwardRef and asChild. The cross-framework view mostly matters if you own a design system serving multiple stacks.
-
What does composition fix that adding more props cannot?
Prop explosion is exactly the anti-pattern this targets. A 10+ prop monolith guards invalid combinations at runtime; compound components and discriminated-union prop APIs make invalid states unrepresentable at compile time, and headless separation lets one behavior carry many appearances.
-
Does it ship a ready-made component library I can npm install?
No. It teaches the architecture: composition patterns, a CSS-in-JS comparison matrix, Atomic Design layering and 4-state handling. The components themselves are yours to build; the payoff is that you build them once and reuse them everywhere.
-
How is it delivered?
By email right after purchase: ready to run, downloaded instantly, no setup wait.
-
One-time or subscription?
A one-time purchase; no subscription or hidden fees. VAT (20%) is included.
-
Can I get a refund?
As a digital product, it can’t be refunded once downloaded. That’s why we show exactly what’s inside and who it’s for, right here.