frontcraft

The Frontend Craft Specification. Every rule has a name, a priority, and a measurable threshold. No opinions without numbers.

324Rules

20Categories

65Critical

152High

98Medium

Agent Skill

npx skills add Dragoon0x/frontcraft click to copy

npm Package

npm install frontcraft click to copy

20 Categories

Every frontend surface area covered. Motion, typography, accessibility, color, performance, layout, forms, interaction, and more.

Live Utilities

The npm package ships TypeScript utilities that validate rules programmatically. Try the contrast checker below.

WCAG Contrast Checker — rules color-contrast-aa-minimum, color-contrast-ui-components

Foreground

Background

Sample text preview

Spring Physics

Configure a spring and see if it meets the spec. The analyzer validates stiffness range, damping ratio, settle time, and context-specific rules in real time.

Spring Analyzer — rules spring-stiffness-range, spring-settle-threshold, spring-damping-ratio-guide

Stiffness 200

Damping 20

Mass 1.0

Timing Thresholds

Every timing value in the spec, visualized. These thresholds come from perception research — the point where users notice a delay, feel sluggishness, or lose attention.

Animation Timing Reference — Category 1: Motion & Timing

Coverage

Every frontend surface area, quantified. Accessibility alone has 35 rules. Motion, performance, and layout each have 20+. Every threshold is backed by WCAG standards, perception research, or platform guidelines.