Open source, MIT licensed, Agent Skills format, v0.1.0

A frontend craft skill for AI coding agents.

Weftline is one folder with one SKILL.md. Your coding agent reads it before touching UI code and follows five passes: Unpick, Warp, Weave, Finish, Proof. Hard rules forbid fabricated metrics, fake social proof, and decorative motion. A motion ladder ranks techniques from plain CSS to the Web Animations API. Plain Markdown, no runtime, no dependencies.

Download ZIP from GitHubView source on GitHub

workflow passes: 5; workflow passes
depth tiers: 4; depth tiers
validation checks: 49; validation checks
files in the package: 94; files in the package

Counts are read from the repository at v0.1.0 when this page loads. The Verify section below shows the command that reproduces them.

Why agent-built interfaces all feel the same

The problem is not model capability. It is that three inputs never make it into the prompt.

No explicit craft bar

Most briefs say make it look good. The model answers with the same interface every time: a centered card, a soft shadow, one safe gradient. The skill forces explicit decisions about hierarchy, spacing, and states before any code exists.

Details get averaged away

Interaction states, focus indicators, and motion intent are the first things generic output drops. Each pass writes them down as requirements, not leftovers.

Claims go unverified

Generated pages invent metrics, reviews, and counters that no backend supports. The hard rules forbid all three, and the final pass requires viewing the result at two widths before reporting done.

Five passes, one thread

The weft is the thread carried through every pass of a weave. The same idea runs through every task the skill touches, from a one-line fix to a full design system.

Unpick

Read the real requirements and the real codebase before writing anything. Ambiguities are written down, not guessed.

Warp

Plan hierarchy, breakpoints, interaction states, and motion before any interface code exists.

Weave

Semantic HTML first, the project's own design tokens first, responsive while building, not after.

Finish

Purposeful motion with a reduced-motion path, a complete state matrix, and copy that makes no unsupported claims.

Proof

Run the checks, view the result at desktop and mobile widths, then report verified, unverified, and blocked items.

Adaptive depth, four tiers

The workflow scales down for one-line fixes instead of imposing ceremony on every task.

Tier	Typical tasks	Process
Patch	Small fixes, copy edits, minor accessibility corrections	Focused edit, then Pass 5 only. No plan document.
Page	A new page, view, or section in an existing system	All five passes with a lightweight plan.
System	Multi-component work, feature areas, design-system additions	All five passes plus boundaries, state, data flow, and a validation strategy.
Motion	Animation-heavy work of any size	All five passes with the motion ladder and a performance budget.

Hard rules the agent must obey

The same standards this site holds itself to.

Never

Fake testimonials, reviews, client logos, or trust badges
Invented metrics, usage counters, or unmeasured performance claims
Vague hero text that fails to explain what the product does
Emoji used as interface icons
Purple gradients or gradient-heavy styling without a design reason
Pill-shaped buttons as a default geometry
Scroll hijacking, custom cursors, decorative motion
Fake progress indicators or simulated functionality

Always

Deliberate typography, a coherent spacing scale, clear hierarchy
Visible focus indicators and full keyboard operability
Responsive layouts verified at narrow and wide widths
Honest reporting: verified, unverified, or blocked, never invented

What ships in the folder

This repository contains exactly this tree, nothing generated and nothing left out.

weftline/94 files

├── .github/
│   └── workflows/
│       ├── deploy.yml
│       └── validate.yml
├── docs/
│   ├── banner.svg
│   └── pipeline.svg
├── prisma/
│   └── schema.prisma
├── public/
│   └── robots.txt
├── src/
│   ├── app/
│   │   ├── globals.css
│   │   ├── icon.svg
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   ├── ui/
│   │   │   ├── accordion.tsx
│   │   │   ├── alert-dialog.tsx
│   │   │   ├── alert.tsx
│   │   │   ├── aspect-ratio.tsx
│   │   │   ├── avatar.tsx
│   │   │   ├── badge.tsx
│   │   │   ├── breadcrumb.tsx
│   │   │   ├── button.tsx
│   │   │   ├── calendar.tsx
│   │   │   ├── card.tsx
│   │   │   ├── carousel.tsx
│   │   │   ├── chart.tsx
│   │   │   ├── checkbox.tsx
│   │   │   ├── collapsible.tsx
│   │   │   ├── command.tsx
│   │   │   ├── context-menu.tsx
│   │   │   ├── dialog.tsx
│   │   │   ├── drawer.tsx
│   │   │   ├── dropdown-menu.tsx
│   │   │   ├── form.tsx
│   │   │   ├── hover-card.tsx
│   │   │   ├── input-otp.tsx
│   │   │   ├── input.tsx
│   │   │   ├── label.tsx
│   │   │   ├── menubar.tsx
│   │   │   ├── navigation-menu.tsx
│   │   │   ├── pagination.tsx
│   │   │   ├── popover.tsx
│   │   │   ├── progress.tsx
│   │   │   ├── radio-group.tsx
│   │   │   ├── resizable.tsx
│   │   │   ├── scroll-area.tsx
│   │   │   ├── select.tsx
│   │   │   ├── separator.tsx
│   │   │   ├── sheet.tsx
│   │   │   ├── sidebar.tsx
│   │   │   ├── skeleton.tsx
│   │   │   ├── slider.tsx
│   │   │   ├── sonner.tsx
│   │   │   ├── switch.tsx
│   │   │   ├── table.tsx
│   │   │   ├── tabs.tsx
│   │   │   ├── textarea.tsx
│   │   │   ├── toast.tsx
│   │   │   ├── toaster.tsx
│   │   │   ├── toggle-group.tsx
│   │   │   ├── toggle.tsx
│   │   │   └── tooltip.tsx
│   │   └── weftline/
│   │       ├── copy-button.tsx
│   │       └── legal-dialog.tsx
│   ├── hooks/
│   │   ├── use-mobile.ts
│   │   └── use-toast.ts
│   └── lib/
│       └── utils.ts
├── weftline/
│   ├── .github/
│   │   ├── ISSUE_TEMPLATE/
│   │   │   ├── bug_report.md
│   │   │   └── feature_request.md
│   │   ├── workflows/
│   │   │   └── validate.yml
│   │   └── PULL_REQUEST_TEMPLATE.md
│   ├── examples/
│   │   ├── anti-patterns.md
│   │   └── good-workflow.md
│   ├── references/
│   │   ├── accessibility-and-performance.md
│   │   ├── compatibility-and-installation.md
│   │   ├── design-principles.md
│   │   └── motion-engineering.md
│   ├── scripts/
│   │   └── validate_skill.py
│   ├── CHANGELOG.md
│   ├── CODE_OF_CONDUCT.md
│   ├── CONTRIBUTING.md
│   ├── LICENSE
│   ├── README.md
│   ├── SECURITY.md
│   └── SKILL.md
├── .gitignore
├── bun.lock
├── components.json
├── eslint.config.mjs
├── LICENSE
├── next-env.d.ts
├── next.config.ts
├── package.json
├── page.tsx
├── postcss.config.mjs
├── README.md
├── tailwind.config.ts
└── tsconfig.json

weftline/SKILL.md
The method itself: five passes, depth tiers, hard rules, motion ladder. 204 lines.
weftline/references/design-principles.md
Visual hierarchy, layout, color, typography, spacing, and the design decision checklist.
weftline/references/motion-engineering.md
The motion ladder in depth: purpose test, technique comparison, performance and lifecycle rules.
weftline/references/accessibility-and-performance.md
Accessibility requirements, responsive rules, and performance practices.
weftline/references/compatibility-and-installation.md
Install paths per agent environment, with the verification status of every claim.
weftline/scripts/validate_skill.py
49 structural and metadata checks. Python 3.7+ standard library only.
weftline/examples/good-workflow.md
Worked examples across the depth tiers.
weftline/examples/anti-patterns.md
Requests the skill must refuse or correct, and how to respond instead.
README.md
Repository overview with the animated method map and install steps.
docs/pipeline.svg
Animated diagram of the five passes, used by the README.
.github/workflows/validate.yml
CI workflow: validates the skill on every push.
src/app/page.tsx
This website: a Next.js 16 application presenting the method.

Check every claim yourself

No testimonials, no star ratings, no usage counters. The evidence is the folder itself, plus commands that verify it in seconds. Standard library only, no dependencies.

Skill validator

Structural checks over frontmatter, links, and content invariants. Python 3.7 or newer, nothing else.

python3 weftline/scripts/validate_skill.py

File count

94 files in this repository, counted by walking it. Clone it from GitHub to get exactly these files and nothing else.

git clone https://github.com/izynu/weftline.git

Checksum

The site serves no archive of its own, so there is nothing to hash here. Verify the folder itself with the validator instead.

python3 weftline/scripts/validate_skill.py

Install on any agent

Three steps, under a minute. Weftline is a folder, not a package: copy it into any location your agent scans, then reload the skill list. Project scope overrides user scope.

1
Get the folder
Download the archive and unzip it, or clone the repository: either way you get the full package, the website and the skill together. The skill is the weftline folder inside it. That inner folder name must stay weftline: the frontmatter name field must match the directory name.
Download ZIP from GitHub

Copy it where your agent looks

Pick the scope that matches how you work. The cross-agent .agents paths come from the Agent Skills specification; .claude/skills/ is the convention many implementations scan.

# 1. Download the repository as a ZIP
curl -fsSL -o weftline.zip https://github.com/izynu/weftline/archive/refs/heads/main.zip
unzip weftline.zip

# 2a. Copy the skill folder into the project (recommended, shared with your team)
cp -r weftline-main/weftline /path/to/your-project/.agents/skills/

# 2b. Or install for yourself across all projects
cp -r weftline-main/weftline ~/.agents/skills/

# 3. Verify the bundle
python3 weftline-main/weftline/scripts/validate_skill.py

3
Validate before you rely on it
Run the bundled validator after any install. It needs Python 3.7 or newer and no packages, and it exits nonzero on any structural problem.
python3 weftline/scripts/validate_skill.py # Expected last line: Result: PASS (49 of 49 checks)

After installing: reload your agent's skill list, then test activation with a real prompt, for example: "Build a pricing page for this project." Activation quality depends on the agent's own retrieval, so test it once before relying on it.

What Weftline is not

Weftline is not a framework, a plugin market, or a hosted service. There is no runtime and nothing to execute inside your app. Each skill is a folder of Markdown with frontmatter: copy it where your agent can read it, and the agent follows it. The Agent Skills format works with Claude Code natively, and with any other tool that can read project files.