AGENT-SKILLS STORE
LOG IN
DESIGN SYSTEM · HANDOFF SHEET

//AGENTIC system · built in Claude Code

Route: fattahia.com/agentic. Tokens, components, animation timings and file paths below — this sheet is the spec the store was built against, kept live so it cannot drift from the code.

PALETTE
ink / page#07070A
panel#141416
line#26262A
muted#8A8A93
text#EDEDEF
acid#D9FF3D
danger#FF6B6B
cat · study#1E7A55
cat · business#2D6FE0
cat · obsidian#6E56CF
cat · design#C4A035
cat · content#C2557A
TYPE & GEOMETRY
display · Satoshi 900, -0.04em
ui/code · IBM Plex Mono 500/600
body · Bricolage Grotesque 400
radius · 8 / 14 / 18 / 999
border · 1px #26262A
glass · rgba(255,255,255,.035) + blur(16px)
section pad · clamp(44px,6vw,84px)
TAILWIND V4 TOKENS
@theme {
  --color-ink: #07070A;
  --color-panel: #141416;
  --color-line: #26262A;
  --color-muted: #8A8A93;
  --color-acid: #D9FF3D;
  --color-violet: #6E56CF;
  --font-display: Satoshi;
  --font-mono: "IBM Plex Mono";
  --font-sans: "Bricolage Grotesque";
}
ANIMATION LIBRARY · 13 IN USE
dotMatrixGlowcursor-linked

Dot grid revealed by a masked radial that follows the pointer.

useCursorMask()
terminalType140ms/char

Prompt types itself with a blinking caret and a scanline sweep.

<TerminalProof/>
cardTiltSheen180ms / 850ms

6deg perspective tilt plus a one-shot light sweep on hover.

<SkillCard/>
revealStagger600ms · 55ms step

IntersectionObserver fade-up, staggered by DOM index.

useReveal()
countUp1100ms

Catalog value and counters animate from 20% to final on mount.

useCountUp()
magneticCTA160ms

Button drifts toward the cursor, scales 0.96 on press.

<MagneticButton/>
skillMarquee32s linear

Infinite duplicated strip of skill slugs under the hero.

<Marquee/>
glassBreathe7s ease-in-out

Blur and saturation breathe on the vault offer panel.

.glass-breathe
installProgress1400ms loop

Dashed line marches between numbered install steps.

<InstallSteps/>
verifySpinner1100ms + 2200ms

Ring spin with an expanding pulse for manual verification.

<VerifyState/>
checkBurst700ms

Success check scales past 1 and settles. No confetti.

<SuccessCheck/>
cartFly620ms

Cloned chip flies from the add button into the nav cart pill.

flyToCart(el)
folderFan680ms · 42ms step

3D folder opens and fans its four files out, tinted by category.

<SkillFolder color/>
COMPONENT MAP · NEXT.JS APP ROUTER
app/(agentic)/agentic/page.tsxStoreHomeHero, rules, vault, offer, proof, testimonials
app/(agentic)/agentic/[slug]/page.tsxSkillDetailSlider, do-not-buy, install steps
app/(agentic)/agentic/pricing/page.tsxPricingOne-time ladder vs ৳299 whole vault
app/(agentic)/agentic/proof/page.tsxProofBefore/after, quotes, TrxID log
app/(agentic)/agentic/library/page.tsxLibraryOrder lookup, real delivery tokens
app/(agentic)/agentic/system/page.tsxSystemSheetThis handoff sheet
components/store/AgenticSkillCard.tsxSkillCardGrid + list variants, tilt, sheen
components/store/AgenticCartDrawer.tsxCartDrawerGlass aside, sub nudge, total
components/store/AgenticSkillFolder.tsxSkillFolder3D folder, fans four files
lib/agentic-skills-content.tsSKILLSDesign copy authority for the catalog
lib/products.tsproductsCommerce authority: price, fulfilment, bundles
app/api/checkout/quotequoteRouteServer re-prices every line, signs the quote
STATES
Empty cart · loading skeleton (glass, no spinner) · TrxID rejected · duplicate TrxID · skill not packaged yet · skill retired · offline
DATA MODEL
skill{slug,cat,tier,price,job,long,md[],trace[],avoid[]}
order{orderNumber,items[],total,trxId,deliveryToken,status}
status: pending | approved | delivered