Run any Skill in Manus with one click

frontend-design

Stars2

Forks0

UpdatedMay 19, 2026 at 01:01

Creates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, dashboards, React components, HTML/CSS layouts, landing pages, posters, or any web UI. Also use when the user says "build me a page," "make this look better," "redesign this," "style this," "create a component," or uploads a screenshot and expects a rebuild. If the task produces HTML, CSS, JSX, or any visual web output, this skill applies. Generates creative, polished code with exceptional attention to aesthetic detail. Never produces generic output.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

AICincy

AICincy/HCJC

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name

frontend-design

description

Frontend Design

Rules

IF the user asks for any web UI: THEN commit to a bold aesthetic direction before writing code. Do not default to safe choices.

IF the user does not specify a style: THEN infer from the context. A civic data tool gets editorial density. A personal project gets personality. A professional deliverable gets institutional restraint. State the chosen direction in one sentence and proceed.

IF the user rejects the aesthetic ("AI slop," "predictable," "boring"): THEN rebuild from scratch with a different direction. Do not iterate on the rejected direction.

Typography

Never use Inter, Roboto, Arial, or system-ui as a design choice. These are fallbacks, not typography. Choose distinctive, characterful fonts. Pair a display face with a body face. Self-host when possible.

Color

Commit to a cohesive palette. Dominant color with sharp accent outperforms evenly distributed palettes. Use CSS variables for consistency. No purple gradients on white backgrounds.

Layout

Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. The choice must be intentional, not defaulted.

Motion

CSS-only solutions for HTML. Motion library for React. Focus on one well-orchestrated page load with staggered reveals. Do not scatter micro-interactions randomly.

Backgrounds

Create atmosphere. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays. No flat solid backgrounds unless the design specifically demands brutalist restraint.

Implementation

Production-grade. Functional. Responsive. Accessible. Every design must be different from the last. No convergence on common choices across generations.

More from this repository

same repository

jcstream-stylesheet-author

AICincy/HCJC

Use when editing web/static/style.css in the JCStream project. Covers the light-theme token system (--bg/--fg/--accent), the 10-tier .tier-F1…MM ladder palette, .ladder-* cells, body.is-table table-mode rules, content-visibility, mobile breakpoint at 720px, and the print at-rule. Trigger phrases: "restyle the cards", "fix the tier colors", "make the hero bigger", "add a CSS rule", "edit the stylesheet", "tweak the lightbox", "fix the table view", "recolor the F3 chip", "tune the print layout".

2026-07-022

jcstream-a11y-auditor

AICincy/HCJC

Use when auditing JCStream for accessibility — WCAG AA color contrast on the light theme, ARIA correctness (aria-current/aria-pressed/aria-modal/role=…), keyboard navigation, focus ring, tab order, alt text, screen-reader-only content, reduced-motion. The new light theme retired the dark theme's hand-tuned contrast tokens, so contrast must be verified empirically rather than assumed from tokens. Trigger phrases: "accessibility audit", "a11y", "a11y review", "WCAG check", "ARIA", "ARIA check", "screen reader", "contrast issue", "color contrast", "focus ring", "keyboard nav", "alt text".

2026-07-022

jcstream-build-helper-author

AICincy/HCJC

Use when adding or modifying Python helper functions in web/build.py, web/classify.py, or web/shape.py that compute values for Jinja templates in the JCStream project. Covers the env.globals registration pattern (in web/build.py), the Inmate/Snapshot models, the _DEGREE_RE / _CHAPTER_LABEL / _OFFENSE_CATEGORY maps (now in web/classify.py), and the snapshot-shape helpers (now in web/shape.py). Trigger phrases: "add a helper for X", "compute Y per inmate", "expose Z to templates", "register a Jinja global", "compute bond/tier/category for inmate", "categorize this ORC code".

2026-05-192

jcstream-template-reviewer

AICincy/HCJC

Use when reviewing the JCStream presentation layer — Jinja templates in `web/templates/*.html`, the RSS feed `web/templates/feed.xml`, the XSLT stylesheet `web/static/feed.xsl`, and the no-required-JS enhancement script `web/static/main.js`. Covers XSS-safe escaping (every `{{ }}` and `|safe`), inline JSON-LD shape, RSS validity, semantic HTML structure, XSLT correctness, progressive-enhancement contract (lightbox / filter / tier-tooltip degrade without JS), and third-party-script hygiene (none allowed per FCRA). **Read-only** — produces a finding report and hands fixes off to `jcstream-template-author` / `jcstream-a11y-auditor` / `jcstream-legal-copy-author`. Trigger phrases: "review the templates", "review inmate.html", "review the homepage", "check the RSS feed", "review the JSON-LD", "schema.org review", "review main.js", "review the filter JS", "review the lightbox", "audit the feed.xsl", "template code review", "XSS check", "Jinja escape audit".

2026-05-192

jcstream-code-reviewer

AICincy/HCJC

Use when conducting a full code review of a JCStream PR, branch, or the whole repo. Orchestrator that fans out to the four language / domain reviewers in parallel — `jcstream-python-reviewer` (55.6% of code), `jcstream-template-reviewer` (29.3%), `jcstream-css-reviewer` (15.1%), `jcstream-security-reviewer` (cross-cutting compliance) — collects their findings, dedupes by file+line, ranks by severity, and emits a single PR-comment-ready consolidated review. **Read-only** — produces a single merged report; the underlying reviewers each produce their own per-domain reports as the trace. Trigger phrases: "code review", "review the whole project", "PR review", "review my changes", "review this branch", "review the diff", "full audit", "review everything", "comprehensive code review", "review PR".

2026-05-192

jcstream-css-reviewer

AICincy/HCJC

Use when reviewing `web/static/style.css` for code-quality issues distinct from rendered accessibility. Covers dead rules, cascade conflicts, duplicate / self-overriding declarations, 10-tier ladder consistency (`.tier-F1`–`.tier-MM`, `.ladder-F1`–`.ladder-MM`), `body.is-table` table-mode parity, mobile breakpoint hand-offs (720px is the primary, 1024px / 1080px / 540px are secondary), content-visibility correctness, print at-rule completeness, unused CSS custom properties, hex duplication vs token use, and reduced-motion scope. **Read-only** — produces a finding report and hands fixes off to `jcstream-stylesheet-author` for code edits or `jcstream-a11y-auditor` for rendered-contrast / ARIA-affecting findings. Trigger phrases: "review the stylesheet", "audit style.css", "check the cascade", "review the print rules", "review the responsive breakpoints", "CSS code review", "find dead CSS", "find duplicate selectors", "review the tier ladder palette".

2026-05-192

name

frontend-design

description

Frontend Design

Rules

IF the user asks for any web UI: THEN commit to a bold aesthetic direction before writing code. Do not default to safe choices.

IF the user rejects the aesthetic ("AI slop," "predictable," "boring"): THEN rebuild from scratch with a different direction. Do not iterate on the rejected direction.

Typography

Color

Commit to a cohesive palette. Dominant color with sharp accent outperforms evenly distributed palettes. Use CSS variables for consistency. No purple gradients on white backgrounds.

Layout

Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. The choice must be intentional, not defaulted.

Motion

CSS-only solutions for HTML. Motion library for React. Focus on one well-orchestrated page load with staggered reveals. Do not scatter micro-interactions randomly.

Backgrounds

Implementation

Production-grade. Functional. Responsive. Accessible. Every design must be different from the last. No convergence on common choices across generations.