Frontend Textbooks

Create designed US Letter HTML textbooks, manuals, field guides, business books, and coffee-table books from supplied manuscripts, then verify and export matching PDFs. Use for new manuscript-to-book work, existing HTML book enhancement, print/mobile layout repair, manuscript-preserving diagrams or editorial imagery, and final book production.

108 stars 6 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add onepixelaway/frontend-textbooks --skill frontend-textbooks

Manual install

git clone --depth 1 https://github.com/onepixelaway/frontend-textbooks.git /tmp/frontend-textbooks
mkdir -p ~/.claude/skills
cp -r /tmp/frontend-textbooks/. ~/.claude/skills/frontend-textbooks

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Frontend Textbooks

Turn a manuscript into a real book: editable HTML, a Letter PDF, cover options, verified assets, and evidence of manuscript preservation.

## Resolve the Skill

Set the path once; keep project inputs and outputs in the user's workspace:

```bash
SKILL_DIR="<absolute path to the directory containing this SKILL.md>"
```

Run bundled commands through `node "$SKILL_DIR/scripts/book-pipeline.mjs"`.

## Ownership Boundary

Scripts own deterministic work: parsing, stable source IDs, schemas, path safety, hashes, pagination measurements, diagnostics, screenshots, PDF export/inspection, caching, and manifests.

The model owns judgment: audience and genre, user-facing color and typography recommendations, semantic classifications, theme/layout rationale, diagram, feature-page, and image choices, exception rationales, targeted repair decisions, and aesthetic approval. Express production decisions through the JSON contracts; do not encode them in prose for a script to interpret.

## Non-Negotiables

- Preserve at least 90% of the manuscript unless the user explicitly requests abridgment. Preserve order, examples, tone, and vocabulary; additive tools never replace source prose.
- Generate one original, manuscript-grounded local bitmap for every cover. It is mandatory, has no waiver, contains no baked-in typography, and may not be reused inside the book. A gradient, generic shape, SVG, stock placeholder, remote URL, or prior book's image is not cover artwork.

Read the full skill on GitHub

Details

Skill name: frontend-textbooks
Repository: onepixelaway/frontend-textbooks
License: MIT
Repo updated: 24 July 2026

FAQ

What does the Frontend Textbooks skill do?

How do I install the Frontend Textbooks skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add onepixelaway/frontend-textbooks --skill frontend-textbooks. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Frontend Textbooks popular?

It lives in onepixelaway/frontend-textbooks, which has 108 GitHub stars and 6 forks.

Related skills

Data2motion Lite

nolangz/data2motion

Lightweight, script-driven variant of data2motion for turning data into a smooth, on-brand animated chart (one self-contained HTML) — built for a TEXT-ONLY model that cannot see its own output. You never write HTML/CSS/SVG/animation; you extract the data, pick a chart, fill a small JSON spec, and run one build script that owns 100% of the look and the motion, so the result cannot drift from the house template style or lose its smoothness. Use to turn a number/stat/table/CSV/paragraph into a quick animated chart, data reveal, or KPI when you want guaranteed template fidelity with minimal reason

Frontend & Design11

Cinematic UI

akseolabs-seo/cinematic-ui

Direct a website the way a film is made: cast a director and a film, choose the medium the film calls for (photoreal 3D, hand-drawn, ink wash, print, pixel, neon, type, photography…), cast a lead, ask for the assets, write a shot list for every section, then shoot it with a scroll-driven camera, designed cuts, a grade, and a screening pass on rendered frames. Use for Awwwards / Framer-grade landing pages, brand, product, portfolio and studio sites, immersive or WebGL / 3D sites, scrollytelling, "cinematic", "film style", "director style", "電影感", "導演風格", "分鏡", "像拍電影一樣做網站", a director's colour o

Frontend & Design24

Shader for Interfaces

120

v2space-labs/shader-for-interfaces

Decide whether an interface effect should stay in CSS, SVG, or Canvas 2D or needs WebGL or WebGPU, then create, integrate, diagnose, and visually verify focused GPU effects inside product interfaces. Use for contained Three.js/WebGL2/GLSL or vgpu/WebGPU/WGSL surfaces, modest particles, GPU data views, and responsive canvases in TypeScript or React. Do not use for dependent passes, persistent simulations, formal render graphs, adaptive-quality systems, or renderer migrations.

Frontend & Design

Anti UI Slop

uizze/uizze

Stop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use when designing, implementing, redesigning, critiquing, or pre-ship reviewing a web or iOS interface in Codex, Claude Code, Cursor, Copilot, or another coding agent. Trigger with "anti-ui-slop", "stop UI slop", "ground this UI in real screens", or "run the UI finish gate".

Frontend & DesignIn 1 list

Design Taste

h3nryprod01/design-taste

Elite frontend design taste for building, reviewing, and polishing web interfaces. Use whenever the user wants to design, redesign, shape, critique, audit, polish, or improve any UI (landing pages, portfolios, dashboards, product UI, components, forms, onboarding, empty states) or asks to make something look better / premium / modern, fix the styling, add or fix animations, or make a design feel less generic ("AI slop"). Covers typography, color, spacing, layout, visual hierarchy, motion, micro-interactions, component states, accessibility, responsive behavior, UX copy, and anti-pattern detect

Frontend & Design

Nerv UI

mdrbx/nerv-ui

Build original, accessible React command-center interfaces with the published @mdrbx/nerv-ui component library. Use for dashboards, monitoring terminals, operational tools, authentication screens, or sharp industrial HUD-style UI in React, Vite, or Next.js.

Frontend & DesignIn 1 list

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.