Auteur
agiwhitelist/auteur
Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products…
Frontend: UI design, distinctive visual styles, HTML artifacts, Three.js 3D.
Install Frontend
$ npx skills add notque/vexjoy-agent --skill frontend -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install notque/vexjoy-agent frontend --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend/frontend .claude/skills/frontend && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "frontend" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/frontend into .claude/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/frontendType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add notque/vexjoy-agent --skill frontend -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install notque/vexjoy-agent frontend --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/frontend/frontend .agents/skills/frontend && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frontend" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/frontend into .agents/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add notque/vexjoy-agent --skill frontend -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install notque/vexjoy-agent frontend --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/frontend/frontend .cursor/skills/frontend && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "frontend" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/frontend into .cursor/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/notque/vexjoy-agent.git --path skills/frontend/frontend--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add notque/vexjoy-agent --skill frontend -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install notque/vexjoy-agent frontend --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/frontend/frontend .gemini/skills/frontend && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "frontend" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/frontend into .gemini/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install notque/vexjoy-agent frontendInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add notque/vexjoy-agent --skill frontend -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/frontend/frontend .github/skills/frontend && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "frontend" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/frontend into .github/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add notque/vexjoy-agent --skill frontend -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install notque/vexjoy-agent frontend --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/frontend/frontend .opencode/skills/frontend && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "frontend" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/frontend/frontend into .opencode/skills/frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
frontend- GitHub stars
- 435
- Token cost
- ~5k tokens
- SKILL.md length
- 1,890 words
- Files
- 129 (incl. references, assets)
- Skills in repo
- 61
- Repo updated
- First seen
- Licence
- MIT
At a glance
Frontend: UI design, distinctive visual styles, HTML artifacts, Three.js 3D.
- Works in 12 steps: Surface check → Brief → Type → …
- Tasks that involve 3D graphics and WebGL
- SKILL.md covers Load first for any UI work, Mode Selection, DESIGN Mode and DISTINCTIVE Mode, plus 2 more sections
- Calls python3
What it does
Frontend is an agent skill from notque/vexjoy-agent. Frontend: UI design, distinctive visual styles, HTML artifacts, Three.js 3D.
Its SKILL.md is about 5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 133 other files, including reference files and assets (for example `SPEC.md`, `agents/html-builder.md` and `references/design-refs/accessibility-review.md`).
It sits in Frontend & Design, covering 3D graphics and WebGL, HTML artifacts and Frontend development. It works with Three.js. The repository describes itself as: VexJoy AI Agent with Jev Intelligent Routing - /do routes plain-English requests to the right specialist agent and gates the work with reviews, tests, and a learning loop. The licence is MIT.
When your agent uses it
- Tasks that involve 3D graphics and WebGL
- Tasks that involve HTML artifacts
- Tasks that involve Frontend development
Example prompts
- “/frontend”
Requirements
- Python 3
- Pre-approved tools (allowed-tools): Read, Write, Bash, Grep, Glob, Edit, Task, Agent, Skill
Workflow steps
12 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 5218674. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
ReadWriteBashGrepGlobEditTaskAgentSkill
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Frontend loads about 5k tokens when it runs, and up to ~110k if it reads all its reference files. Until then it costs about 21 tokens; SKILL.md has 1,890 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
allowed-tools: Read, Write, Bash, Grep, Glob, Edit, Task, Agent, Skill
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from notque/vexjoy-agent at commit 5218674, republished under its MIT licence (© notque). 1,890 words, ~4,958 tokens.
Download SKILL.mdSave it as
.claude/skills/frontend/SKILL.md (or your agent's skills folder). This skill also uses 128 other files; get the full folder from GitHub.- name
- frontend
- description
- Frontend: UI design, distinctive visual styles, HTML artifacts, Three.js 3D.
- allowed-tools
- Read, Write, Bash, Grep, Glob, Edit, Task, Agent, Skill
- user-invocable
- true
- routing.force_route
- false
- routing.not_for
- game UI (use game-dev), backend work (use workflow), brand or logo design without code
- routing.triggers
- design, UX copy, design system, accessibility, WCAG, design handoff, frontend design, visual identity, HTML artifact, make HTML, self-contained HTML, threejs…
- routing.category
- frontend
- routing.pairs_with
- typescript-frontend-engineer, ui-design-engineer, game-dev
Frontend Skill
Four modes: Design (UX copy, design systems, critique, accessibility, handoff, research), Distinctive (surface check, then brand-led visual direction for landing and campaign pages), HTML-Artifact (self-contained HTML generation with 8 shapes), and Three.js (3D web apps in imperative, R3F, or WebGPU paradigms).
Load first for any UI work
Before DESIGN, DISTINCTIVE, HTML-ARTIFACT, or a THREEJS UI overlay (HUD, menu, panel), read skills/shared-patterns/ui-design-judgment.md. Take starting values from ui-design-recipes.md and before/after fixes from ui-design-examples.md in the same folder. The mode references below add depth. Where they conflict with the core doc, the core doc wins. Every default can be overridden; state the reason.
Mode Selection
Classify the request into one mode before loading references.
| Mode | Signals | What to Load |
|---|---|---|
| DESIGN | UX copy, design system, design critique, accessibility, WCAG, design handoff, user research | Design-refs per sub-mode table below |
| DISTINCTIVE | Frontend design, typography, visual identity, anti-cliche, text animation, card effects | references/distinctive-frontend-design-refs/ per step |
| HTML-ARTIFACT | HTML artifact, make HTML, as HTML, rich visualization, interactive document, pptx, deck | references/html-artifact-refs/ per shape |
| THREEJS | Three.js, 3D scene, WebGL, WebGPU, react three fiber, R3F, GLTF | references/threejs-builder-refs/ per paradigm |
DESIGN Mode
Design methodology: UX copy, design systems, critique, accessibility review,
developer handoff, user research synthesis. Always load
references/design-refs/llm-design-failure-modes.md alongside mode-specific
reference.
Sub-mode Detection
| Sub-mode | Signals | Load |
|---|---|---|
| UX-COPY | write copy, button text, error message, empty state, tooltip | references/design-refs/ux-copy.md |
| DESIGN-SYSTEM | design tokens, component library, audit components, theme | references/design-refs/design-systems.md |
| CRITIQUE | review design, critique mockup, design feedback, usability | references/design-refs/design-critique.md |
| ACCESSIBILITY | WCAG, accessibility audit, color contrast, keyboard nav, a11y | references/design-refs/accessibility-review.md |
| HANDOFF | developer handoff, spec sheet, implementation spec, responsive | references/design-refs/design-handoff.md |
| RESEARCH | synthesize research, interview analysis, usability findings | (inline below) |
UX-COPY
- Gather context: component type, user emotional state, brand voice, constraints, existing terminology.
- Generate copy: primary recommendation with rationale, 2-3 alternatives, localization notes.
- Validate: terminology consistency, action labels match outcomes, error messages follow What/Why/Fix, character limits met.
Gate: Copy for all requested components. Each piece has rationale. Alternatives differentiated.
DESIGN-SYSTEM
Three operations: Audit (naming consistency, token coverage, hardcoded values, state completeness), Document (props/variants/states/a11y/usage spec), Extend (new component using existing tokens). Use design token architecture: color, typography, spacing, borders, shadows, motion.
Validate: consistent naming, all values reference tokens, all states defined (default/hover/active/disabled/loading/error), ARIA documented.
CRITIQUE
Render or open the design first, then run the core doc's section 10 checks (three widths, squint, grayscale, edge content) and rank findings in its fix order: content and job, hierarchy, spacing, type, color, polish. Write each finding as element, problem, effect, fix. Apply Nielsen heuristics only where they explain a real finding. Match depth to stage: exploration (concept direction), refinement (hierarchy, patterns), final (contrast, spacing, a11y).
ACCESSIBILITY
Audit by WCAG principle: Perceivable (alt text 1.1.1, contrast 4.5:1 text / 3:1 UI), Operable (keyboard 2.1.1, focus order 2.4.3, touch 44x44px), Understandable (predictable 3.2.1, error ID 3.3.1), Robust (name/role/value 4.1.2). Report: severity matrix, each finding with WCAG criterion + remediation, contrast table, keyboard map.
HANDOFF
Gather: design source, tech stack, tokens, breakpoints. Generate spec covering: layout, tokens, components, states, interactions, content limits, edge cases (empty/loading/error/overflow/i18n), accessibility, animation. Validate: all states documented, token references used, edge cases present.
RESEARCH
Accept inputs (transcripts, surveys, support tickets). Extract observations and quotes -- behavioral data outweighs stated preferences. Synthesize via affinity mapping and theme development. Priority matrix (impact x frequency). Output: executive summary, themes with evidence, insights-to-opportunities table, user segments, recommendations.
Output Conventions
Markdown with tables. Severity: Critical (blocks users), Major (degrades), Minor (polish). Every recommendation names element + issue + concrete fix. Include what works alongside what needs improvement.
DISTINCTIVE Mode
Brand-led visual direction for pages people visit once: landing, launch, portfolio, event. Output: tokens, base styles, and a rendered page.
Step 1: Surface check
Name the surface before any styling (core doc section 1):
| Surface | Examples | Do this |
|---|---|---|
| Tool | dashboard, admin, editor, settings, internal app | Get real content (Step 2 item 1), then use the tool recipe in ui-design-recipes.md: one neutral sans (system UI font, Inter, Geist), tinted grays plus one accent, 4/8 spacing scale, borders over shadows, motion only for state changes. Build tokens (Step 6 item 1), then Step 7. |
| Brand page | landing, launch, portfolio, event, campaign | Continue with Step 2. |
| Mixed (marketing site with an app inside) | pricing page plus signed-in app | Brand rules for public pages, tool rules for the app. |
Litmus: on a tool, a user who reads only headings, labels, and numbers understands the screen. On a brand page, a user who sees the first viewport for 3 seconds can name the product and its promise.
Step 2: Brief
- Get real content: product name, headline, main action, real section copy. Mark missing items as placeholders (
references/distinctive-frontend-design-refs/honest-placeholders.md). - Pick one page structure from
references/distinctive-frontend-design-refs/macrostructure-catalog.mdby heading anchor. Load only that entry. - Write three sentences: visual thesis (mood), content plan (sections in order, one job each), interaction thesis (the few motions that matter).
- Write two candidate directions from the brand and audience, pick one, and say why. Use
color-inspirations.jsonandfont-catalog.jsoninreferences/distinctive-frontend-design-refs/when the brand gives no lead. Do not default to serif display, cream background, and grain; that is the overcorrection tell. Direction examples and per-step values:references/distinctive-frontend-design-refs/phase-details.md.
Step 3: Type
Default: one display face plus one text face, both from font-catalog.json and matched to the direction. A neutral sans is a valid text face. Use the core doc's scale and line heights (section 4); body 16 px, headings 1.1-1.25 line height. Avoid reflexive picks: a face chosen because it is popular (Inter, Space Grotesk) or because it looks "not generic" (editorial serif) needs a brand reason on a brand page.
Step 4: Color
Start neutral: background, surface, border, and text grays tinted toward the brand hue. Add one brand accent for the main action, links, and selection; status colors are separate. A rough 60/30/10 split (neutral, secondary, accent) is a starting point, not a target. Build scales with references/distinctive-frontend-design-refs/oklch-color-harmony.md. Check contrast on real pairs: 4.5:1 body text, 3:1 large text and UI boundaries. Build dark mode from its own values (core doc section 5).
Step 5: Motion and background
- Motion: 2-3 intentional motions per page is a good budget (entrance, scroll, interaction). Use 150-250 ms ease-out for UI, up to 600 ms for a one-time hero entrance. Respect
prefers-reduced-motion. Patterns:references/distinctive-frontend-design-refs/animation-patterns.md. - Background: a solid surface is a valid default. Add at most one effect (gradient, pattern, texture) from
references/distinctive-frontend-design-refs/background-techniques.mdwhen it supports the brand and keeps text contrast. - Hero: one composition, the product name at hero scale, one primary action. Full-bleed by default.
Step 6: Build and check
- Emit the design stamp comment, CSS custom properties, and base styles (
references/distinctive-frontend-design-refs/implementation-examples.md). - Run the advisory check:
python3 ${CLAUDE_SKILL_DIR}/scripts-distinctive-frontend-design/validate_design.py --fonts "Display,Body" --palette palette.json --project NAME --macrostructure macro:ID --emitted-css generated.html. Fix warnings that apply; for the rest, state why the default does not fit. Add--strictto exit 1 below a score of 80.
Show full SKILL.md (765 more words)Show less
Step 7: Look, then fix
Run the core doc's section 10 loop on the rendered page. This is the final step for every surface, including tools.
HTML-ARTIFACT Mode
Generate single self-contained .html files. All CSS in <style>, all JS in
<script>. No CDN links, no frameworks, no external deps. Max 500KB.
Phase 0: Check Saved Template
Run: python3 ${CLAUDE_SKILL_DIR}/scripts-html-artifact/fill-template.py --list
If a saved template matches, clone it and fill slots only. Skip to Phase 4 VALIDATE. Do not restyle the template.
Phase 1: Detect Shape
Run: python3 ${CLAUDE_SKILL_DIR}/scripts-html-artifact/detect-shape.py --request "{request}"
| Shape | Signals | Output |
|---|---|---|
| spec | plan, compare, brainstorm | Side-by-side grids, pro/con, SVG diagrams |
| code-review | review PR, explain diff | Diff rendering, severity colors, annotations |
| prototype | prototype, tune, try options | Sliders, CSS var live update, sandbox |
| report | report, summarize, status | TL;DR box, collapsibles, timeline, metrics |
| editor | reorder, triage, edit config | Drag-drop, kanban, toggles, export |
| data-viz | visualize, chart, dashboard | SVG charts, canvas, tooltips, filters |
| diagram | diagram, flowchart, architecture | Inline SVG, annotated flowcharts |
| deck | slides, presentation, pitch | Arrow-key nav, 16:9, progress bar |
Low confidence falls back to report. Hybrid shapes: primary controls layout, secondary provides embedded components.
Phase 2: Assemble + Load Context
Run: python3 ${CLAUDE_SKILL_DIR}/scripts-html-artifact/assemble-template.py --shape {shape} --title "{title}" --components {components}
Load references/html-artifact-refs/design-system.md. For diagram shapes, also load references/html-artifact-refs/shape-diagram-illustration.md and references/html-artifact-refs/diagram-layering.md. Per-shape must-include rules live in agents/html-builder.md.
Phase 3: Generate
Dispatch html-builder agent (see agents/html-builder.md) with pre-assembled template. Vanilla JS only. Semantic HTML. SVG inline.
Phase 4: Validate, then look
- Run:
python3 ${CLAUDE_SKILL_DIR}/scripts-html-artifact/validate-artifact.py {html_file}. Errors (structure,<title>, external deps, empty body) must be fixed; re-run up to 3 times. CSS slop findings are warnings: fix them or state why they fit this artifact. - Run the core doc's section 10 loop on the rendered file. This is the final check before delivery.
Phase 5: Deliver
Print absolute file path, 1-line summary, offer browser open. Check $DISPLAY/$SSH_TTY before offering open on Linux.
Phase 6-7: Export (optional)
PDF: python3 ${CLAUDE_SKILL_DIR}/scripts-html-artifact/to-pdf.py --input <html> --output <pdf> --json. PPTX (deck shape only): python3 ${CLAUDE_SKILL_DIR}/scripts-html-artifact/pptx-bridge/run-unified.py --input <html> --format pptx --out <pptx> --no-render.
THREEJS Mode
Build Three.js web applications in four phases: Design, Build, Animate, Polish. Three paradigms detected from context.
Phase 1: Design
Detect paradigm first:
| Signal | Paradigm | Load |
|---|---|---|
@react-three/fiber, r3f, drei, useFrame | React Three Fiber | references/threejs-builder-refs/react-three-fiber.md |
WebGPURenderer, TSL, compute shader | WebGPU | references/threejs-builder-refs/webgpu.md |
Standalone HTML, new THREE.Scene(), vanilla | Imperative | references/threejs-builder-refs/advanced-topics.md |
| EventBus, GameState, player controller | Game (alongside paradigm) | references/threejs-builder-refs/game-architecture.md + game-patterns.md |
GLTF/GLB, .glb, skeletal rigs | GLTF (alongside paradigm) | references/threejs-builder-refs/gltf-loading.md |
If ambiguous, ask -- imperative and R3F patterns conflict. Identify core visual element, select components per references/threejs-builder-refs/build-recipes.md, document visual style.
Phase 2: Build
Follow paradigm-specific patterns from loaded reference. Imperative defaults: single HTML, CONFIG object, three-point lighting, renderer.setAnimationLoop(). See references/threejs-builder-refs/build-recipes.md for boilerplate, scene infrastructure, constraints.
Phase 3: Animate
R3F uses useFrame (never requestAnimationFrame). Imperative uses setAnimationLoop. No geometry/material allocation in animation loop. Wire interaction handlers per scene plan.
Phase 4: Polish
Remove debug helpers. Handle window resize. Verify visible lighting. Run the verification steps in references/threejs-builder-refs/build-recipes.md, then finish with the core doc's section 10 loop on the rendered scene and any UI overlay.
Deep References
Load on demand when the task needs detailed patterns, examples, or specifications:
Design Refs
| File | Content |
|---|---|
references/design-refs/ux-copy.md | Component-specific UX copy patterns |
references/design-refs/design-systems.md | Design token architecture, component specs |
references/design-refs/design-critique.md | Structured critique method, heuristics |
references/design-refs/accessibility-review.md | WCAG criteria, component a11y patterns |
references/design-refs/design-handoff.md | Spec categories, artifact templates |
references/design-refs/llm-design-failure-modes.md | LLM design failure modes with defenses |
Distinctive Frontend Design Refs
| File | Content |
|---|---|
references/distinctive-frontend-design-refs/font-catalog.json | Curated fonts by aesthetic category |
references/distinctive-frontend-design-refs/color-inspirations.json | Cultural/contextual palette sources |
references/distinctive-frontend-design-refs/animation-patterns.md | Animation choreography with CSS/React |
references/distinctive-frontend-design-refs/background-techniques.md | Atmospheric background methods |
references/distinctive-frontend-design-refs/implementation-examples.md | CSS tokens, framework templates |
references/distinctive-frontend-design-refs/macrostructure-catalog.md | Named macro:* page structures |
references/distinctive-frontend-design-refs/phase-details.md | Direction examples, motion timing, hero, backgrounds, design stamp |
references/distinctive-frontend-design-refs/css-audit-patterns.md | Grep commands to audit existing CSS |
references/distinctive-frontend-design-refs/performance-budgets.md | Render costs, layout thrashing |
references/distinctive-frontend-design-refs/game-ui-polish.md | Game-native UI polish rules |
references/distinctive-frontend-design-refs/card-shader-patterns.md | Fragment shader GLSL |
references/distinctive-frontend-design-refs/shader-integration-react.md | React 19 WebGL hook + context pool |
references/distinctive-frontend-design-refs/balatro-shader-breakdown.md | Holographic foil shader |
references/distinctive-frontend-design-refs/roll-text.md | Roll/slot text patterns |
references/distinctive-frontend-design-refs/text-animation-patterns.md | Reveal, typewriter, crossfade |
references/distinctive-frontend-design-refs/oklch-color-harmony.md | OKLCH color harmony |
references/distinctive-frontend-design-refs/honest-placeholders.md | Placeholder content rules |
HTML Artifact Refs
| File | Content |
|---|---|
references/html-artifact-refs/design-system.md | Theme tokens, a11y checklist, SVG rules |
references/html-artifact-refs/diagram-layering.md | SVG layer order, dark-theme colors |
references/html-artifact-refs/infographic-layouts.md | 21 layout types, 22 visual styles |
references/html-artifact-refs/pdf-export.md | Page-size table, troubleshooting |
references/html-artifact-refs/pptx-export.md | Layout types, THEME dict, CLI ref |
references/html-artifact-refs/shape-diagram-illustration.md | SVG construction, diagram types |
Three.js Refs
| File | Content |
|---|---|
references/threejs-builder-refs/build-recipes.md | Boilerplate, scene setup, error handling |
references/threejs-builder-refs/react-three-fiber.md | R3F patterns, Drei, Zustand |
references/threejs-builder-refs/webgpu.md | WebGPURenderer, TSL, compute shaders |
references/threejs-builder-refs/advanced-topics.md | GLTF, post-processing, shaders, physics |
references/threejs-builder-refs/visual-polish.md | Materials, lighting, HDR, shadows |
references/threejs-builder-refs/gltf-loading.md | Coordinate contract, caching, auto-center |
references/threejs-builder-refs/game-patterns.md | Animation FSM, camera movement, input |
references/threejs-builder-refs/game-architecture.md | EventBus, GameState, pre-ship checklist |
references/threejs-builder-refs/shader-patterns.md | ShaderMaterial, vertex displacement, effects |
references/threejs-builder-refs/performance-patterns.md | InstancedMesh, batching, LOD, dispose |
references/threejs-builder-refs/advanced-animation.md | AnimationMixer, IK, spring physics, GSAP |
Scripts
- Distinctive design:
scripts-distinctive-frontend-design/validate_design.py,scripts-distinctive-frontend-design/css_slop_rules.py - HTML artifact:
scripts-html-artifact/detect-shape.py,scripts-html-artifact/assemble-template.py,scripts-html-artifact/validate-artifact.py,scripts-html-artifact/fill-template.py,scripts-html-artifact/to-pdf.py,scripts-html-artifact/pptx-bridge/ - HTML artifact templates:
templates/, agents:agents/html-builder.md
© notque, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 128 other files (references, assets) in skills/frontend/frontend of notque/vexjoy-agent.
- SKILL.md
- SPEC.md
- agents/html-builder.md
- assets/base-template.html
- references/design-refs/accessibility-review.md
- references/design-refs/design-critique.md
- references/design-refs/design-handoff.md
- references/design-refs/design-systems.md
- references/design-refs/llm-design-failure-modes.md
- references/design-refs/ux-copy.md
- references/distinctive-frontend-design-refs/animation-patterns.md
- references/distinctive-frontend-design-refs/background-techniques.md
- references/distinctive-frontend-design-refs/balatro-shader-breakdown.md
- references/distinctive-frontend-design-refs/card-shader-patterns.md
- references/distinctive-frontend-design-refs/color-inspirations.json
- references/distinctive-frontend-design-refs/css-audit-patterns.md
- … and 113 more
Open the folder on GitHubat commit 5218674
Compare with similar skills
Frontend next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Frontend this skillnotque/vexjoy-agent | 435 | — | ~5k | Automated safety check: Notes | MIT | |
| Auteuragiwhitelist/auteur | 1k | — | ~5k | Automated safety check: Pass | MIT | |
| Better Designmarvkr/better-design | 252 | — | ~1.2k | Automated safety check: Pass | MIT | |
| Nerv UITheGreatGildo/nerv-ui | 228 | — | ~2.3k | Automated safety check: Pass | MIT | |
| Oma Designfirst-fluke/oh-my-agent | 1.3k | — | ~2.9k | Automated safety check: Pass | MIT | |
| 3D Assembly ManualSkylarKitchen/skills | 117 | — | ~1.6k | Automated safety check: Pass | MIT |
Similar skills
Better Design
marvkr/better-design
Build, improve, and review production interfaces with the Better Design MCP.
Nerv UI
TheGreatGildo/nerv-ui
NERV Operations Console v2 — Evangelion-inspired UI component library.
Oma Design
first-fluke/oh-my-agent
AI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component library guidance.
3D Assembly Manual
SkylarKitchen/skills
Builds a phone-first interactive 3D step-by-step build guide as one self-contained Three.js HTML file, starting from a bundled starter template.
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
More from notque/vexjoy-agent
All 61 skills in this repoGame Asset Generator
notque/vexjoy-agent
Deterministic palette/matrix pixel art (not AI). An agent skill from notque/vexjoy-agent.
PR Workflow
notque/vexjoy-agent
Pull request lifecycle: commit, codex review, sync, review, fix, status, cleanup, and PR mining.
Architecture Deepening
notque/vexjoy-agent
Improve architecture across modules by deepening interfaces.
Code Quality
notque/vexjoy-agent
Code quality: cleanup, linting, formatting, quality gates. An agent skill from notque/vexjoy-agent.
Codebase Analyzer
notque/vexjoy-agent
Statistical rule discovery from Go codebase patterns. An agent skill from notque/vexjoy-agent.
Comment Quality
notque/vexjoy-agent
Review and fix temporal references in code comments. An agent skill from notque/vexjoy-agent.
Related
Works with
Categories
Questions about Frontend
What does Frontend do?
Frontend: UI design, distinctive visual styles, HTML artifacts, Three.js 3D. Frontend is an agent skill from notque/vexjoy-agent.js 3D.
When should I use Frontend?
Frontend fits situations like: tasks that involve 3D graphics and WebGL; tasks that involve HTML artifacts; tasks that involve Frontend development.
How do I install Frontend in Claude Code?
Run `npx skills add notque/vexjoy-agent --skill frontend -a claude-code`. Or copy the skill folder (skills/frontend/frontend in notque/vexjoy-agent) into .claude/skills/frontend in your project. Claude Code loads it when a task matches its description.
How do I install Frontend in Codex?
Run `npx skills add notque/vexjoy-agent --skill frontend -a codex`. Or copy the skill folder (skills/frontend/frontend in notque/vexjoy-agent) into .agents/skills/frontend in your project. Codex loads it when a task matches its description.
Can I use Frontend in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add notque/vexjoy-agent --skill frontend -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend, .gemini/skills/frontend, .github/skills/frontend and .opencode/skills/frontend in your project.
What does Frontend need to run?
Going by SKILL.md and its folder, Frontend needs the command-line tools its instructions call (python3). Our summary lists: Python 3. Its frontmatter pre-approves these tools: Read, Write, Bash, Grep, Glob, Edit, Task, Agent, Skill.
Does Frontend access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Frontend safe to install?
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
What licence does Frontend use?
Frontend is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Frontend use?
About 5k tokens (SKILL.md is roughly 20k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 105k tokens, read only when the agent opens those files.
What are the alternatives to Frontend?
Skills that share tags, products or a category with Frontend: Auteur (agiwhitelist/auteur, 1k stars), Better Design (marvkr/better-design, 252 stars), Nerv UI (TheGreatGildo/nerv-ui, 228 stars) and Oma Design (first-fluke/oh-my-agent, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend?
notque (a GitHub user) maintains it in notque/vexjoy-agent, which has 435 GitHub stars. The repository holds 61 skills in this directory. The repository was last updated on October 3, 2026.
Source: notque/vexjoy-agent on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.