Run any Skill in Manus with one click

kernel-chat-web-design

Stars15

Forks5

UpdatedJuly 19, 2026 at 22:18

Guides the design, layout, styling, and interactivity of kernel.chat editorial spreads and standalone artifact editions. Use this skill when editing or creating pages, React components, CSS files, or single-file HTML artifacts in the kernel.chat project to enforce the POPEYE-inspired bilingual design grammar and the interaction-language/artifact-language laws.

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

isaacsight

isaacsight/kernel

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

File Explorer

8 files

SKILL.md

readonly

More from this repository

same repository

kernel-chat-art-direction

isaacsight/kernel

Creates distinctive editorial art direction for kernel.chat issues before implementation. Use when choosing an issue's visual concept, typography, composition, cover system, media grammar, responsive transformation, or motion intent; when a page feels generic or lacks character; or when original image and video assets need one coherent visual language.

2026-07-1915

kernel-chat-design-qa

isaacsight/kernel

Audits kernel.chat pages for responsive visual craft, accessibility, motion safety, interaction truth, runtime health, and production rendering. Use when reviewing an issue or artifact, checking whether a design is finished, comparing desktop and mobile, validating reduced motion or print, finding overflow and broken media, or proving that a published route matches the build.

2026-07-1915

kernel-chat-design

isaacsight/kernel

Use this skill to generate well-branded editorial interfaces and assets for kernel.chat ("Magazine for City Coders" — an independent magazine that is an unnamed homage to POPEYE), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and editorial UI components for prototyping.

2026-07-1615

blender-to-unity

isaacsight/kernel

Hand off a model from Blender (via BlenderMCP) into Unity (via MCP for Unity) — export the current Blender model, import it through import_model_file, and place it in the open scene. Use when the user has BlenderMCP and MCP for Unity both connected and wants to bring a Blender model into Unity. Does NOT drive Blender's own generators; BlenderMCP owns how the model got into Blender.

2026-07-1515

higgsfield-generate

isaacsight/kernel

Generate images/videos/3D assets/audio via Higgsfield AI. Defaults: GPT Image 2 for image/design/text, Seedance 2.0 for video, Nano Banana 2/Lite/Pro for character/reference images, Marketing Studio for ads, Seed Audio 1.0 for audio. Use when: "generate an image", "make a video", "animate this photo", "image-to-video", "edit/stylize/remix this image", "reframe this video", "edit this video from a sketch", "create a 3D model/GLB", "create a sound effect", "make music", "text-to-audio", "create an ad", "make a UGC video", "unboxing", "presenter video", "import product from URL", or "analyze video virality". Supports image-to-3D (`multi_image_to_3d`), text-to-audio/music (`seed_audio`), workflow generation (`draw_to_video`, `reframe`), Marketing Studio, and Virality Predictor (`brain_activity`). Chain with higgsfield-soul-id for face/identity consistency. NOT for: Soul Character training (use higgsfield-soul-id), product photoshoots, marketplace listing cards, text/chat/TTS tasks.

2026-07-1515

higgsfield-websites

isaacsight/kernel

Build, edit, and deploy full-stack websites via the Higgsfield CLI (`higgsfield website …`). Each site is a React 19 + TanStack Start SSR app in one Cloudflare Worker (D1/R2/KV/DO/Containers). TWO product types, picked via `--type` on create: `website` (standalone, NO Higgsfield integration, independent brand, custom CSS — the image-grounded pipeline in references/website-flow.md) vs `app` (Sign in with Higgsfield + fnf SDK, Quanta + app layouts per references/app-flow.md). This file routes to the right flow; each flow carries its own workflow, references, hard rules, and deploy/publish gates. Use when: "build me a website", "make a landing page", "create a web app", "build a SaaS dashboard / tool / portfolio", "deploy this site", "edit my site", "publish", "ship to production". NOT for: single image/video/audio generation (higgsfield-generate), product photos (higgsfield-product-photoshoot), marketplace cards (higgsfield-marketplace-cards).

2026-07-1515

name	kernel-chat-web-design
description	Guides the design, layout, styling, and interactivity of kernel.chat editorial spreads and standalone artifact editions. Use this skill when editing or creating pages, React components, CSS files, or single-file HTML artifacts in the kernel.chat project to enforce the POPEYE-inspired bilingual design grammar and the interaction-language/artifact-language laws.

Kernel Chat Web Design

Overview

This skill encodes the visual grammar, interaction constraints, styling tokens, and publishing guidelines of kernel.chat. It serves as the single source of truth for creating editorial magazine issues that honor the POPEYE-inspired warmth while remaining calm, accessible, and scientifically honest.

Skill Routing

Use this skill as the implementation and publication contract. Pair it with the specialist that matches the phase:

Use $kernel-chat-art-direction before implementation when the visual concept, cover, composition, type hierarchy, asset grammar, or responsive transformation is not yet resolved.
Use $motion-design, $micro-interactions, or the relevant GSAP skill when motion requires detailed choreography beyond the house constraints below.
Use $kernel-chat-design-qa after implementation for rendered desktop/mobile inspection, accessibility and motion checks, print proof, and live-production verification.

Do not collapse these phases into a single styling pass. Art direction decides the visual argument; this skill implements it in the house system; design QA proves the result.

The House Grammar

kernel.chat is an editorial magazine, not an application. Every release is named ISSUE N · MONTH YEAR.

Voice & Copy Constraints

Never name the inspiration on the site. No mention of "POPEYE" in user-visible copy. Homage is carried entirely through grammar.
Magazine terminology only. Use terms like issue, feature, spread, folio, kicker, monument, colophon, masthead, dateline, bulletin. Do not use app terms like dashboard, panel, card, widget, modal.
Typography. EB Garamond for prose, Courier Prime for metadata, Noto Serif JP for Japanese subtitles and parallel text.
Bilingual Lockups. EN-primary with selective JP subtitles/lockups (.pop-bilingual > .pop-latin / .pop-jp).
No Emojis. Use the star/asterisk symbol (★) as the single recurring folio system glyph.

Core Design System & Tokens

CSS custom properties live in src/index.css (specifically lines 118-150 for tokens). Do not hardcode values; always use these variables.

The Stock Cabinet (Paper Grounds)

--pop-ivory (#FAF9F6) — Serious-sober / press-preview white ground.
--pop-cream (#F3E9D2) — Warm default magazine paper.
--pop-butter (#EFD9A0) — Summer / slow leisure reading paper.
--pop-kraft (#C8A97E) — Camel / outdoor field-report paper.
--pop-sepia (#D4C5A9) — Muted background accent.
--pop-coffee (#6B4E3D) — Rich brown text / neutral accent.
--pop-ink (#1F1E1D) — Night / nocturnal dark mode ground.
--pop-ledger (#F2EFE2) — Pale graph-ruled paper for audit issues.

The Ink Cabinet (Spot Accents)

Declaring an accent shifts the Spot Color (--issue-accent-base and derived tones via oklch). Raw hexes are permitted if they pass isPopeyeSafe() (rejects gray, neon, and RGB primaries).

Seed	Base Hex	Fits / Temperament
`tomato`	`#E24E1B`	The default house accent. 370+ issues.
`brick`	`#9E3A2B`	Deeper, archival — literature, memory, record-of-record.
`cobalt`	`#1D4E89`	Winter, nocturnal, nightlife, city transit-blue.
`pool`	`#4FB5C8`	Teal — systems, terminal, code, infrastructure.
`ivy`	`#2E4A2E`	Deep forest — nature, outdoor, agriculture.
`olive`	`#6B7A3D`	Fatigue-olive — field work, labor, maps.
`celadon`	`#6F968A`	Muted grey-jade (비색) — Korean lifestyle / yeobaek (negative space).
`amethyst`	`#6B5B95`	Metapage / anniversary / year-in-review.
`oxblood`	`#5E2328`	Burgundy — literature, wine, memory, endings.
`coffee`	`#6B4E3D`	Rich brown — craft, conversation, slow work.
`graphite`	`#3F3D3A`	Pencil-lead grey — audits, ledger-books.

The Interaction Language

Interactive elements must obey The Seven Rules from docs/interaction-language.md.

Calm by Default. Touches deepens; it never gates. The page at rest is complete.
Calibrated Instruments. Controls represent a variable the story is about. No hover effects, cursor trails, scroll-triggered fades, or decorative animations.
Motion is Weather. CSS-only transitions and keyframes at weather amplitude (movement of paper in a room).
- Exception: Working-Model Plate. Script-driven animation (requestAnimationFrame) is allowed only inside a framed plate, must be timer-robust (race rAF with setTimeout), and must collapse instantly to resting state under prefers-reduced-motion.
Everything Stays on the Page. Every state exists in the DOM at all times. Print (@media print) must stack all states. Generative plates must print their deterministic seed (No.###) on the artwork so they can be re-drawn.
Established ARIA Patterns. Roving tab-index radiogroups, switch, tablist/tabpanel, standard button toggles. Focus states must use the issue accent and remain visible on all stocks.
The Meter Tells the Truth. No faked gauges or progress bars. Displayed numbers are measured, or labelled representative next to the number (meterNote / plateNote). Ledgers are session-only and unrecorded.
Two Instances Before a Pattern. Do not extract shared machinery until a second story absolutely requires it.

The Thirteen Interaction Shapes

Dial (instrument, ARIA radiogroup): N ordered positions on one variable.
Compare (compare, ARIA switch): A binary toggle between two co-equal lenses.
Sequence (sequence, ARIA tablist): An ordered process in discrete, complete stages.
Galley (galley, ARIA pressed toggles): Passage-level strike/stet editorial marks.
Margin (margin, native textareas): Writable session-only margins for notes.
Press (press, composition sliders): Composing stock, ink seed, and layout.
Close (close, sibling buttons): A feed with an equal-weight stop control.
Proof (proof, line adjudication): Adjudicating machine drafts (keep / edit / strike).
Day (day, moment selectors): Marking time-lived moments (LET IT RIDE / STEP IN).
Plate (plate, block simulation): Operational blocks with wires, redraws, and seeds.
Bore (bore, gauge WINCH button): Vertical strata probe with carried context.
Fourier (fourier, canvas phasor): Harmonic wave summation and Web Audio preview.
Audit (audit, proximity beam): Attention metering, proximity-mask spotlight, and budgets.
Composite: Tutor (tutor, lesson frame): Composes primitives to teach interaction.

Standalone Artifact Editions

Every issue ships both as a site spread and as a standalone Artifact Edition (artifacts/<N>-<slug>.html).

The Artifact Grammar

One Self-Contained File. Strictly CSS-inline, strict CSP-safe, no external CDNs or scripts. Font stacks must utilize local fallbacks.
The Depth Doctrine. Must go deep vertically (axis with a gauge, carried context from upper layers, floor that pays, emphasis-never-existence).
Tactile Physics. Dragging or shifting should use interruptible spring physics, inertia, friction, and lag rather than linear bezier curves.
Disclosures. Running head, colophon, and notes explaining that data is session-only and reload erases it.

Verification & Publishing Workflow

Always run verification commands before merging/shipping:

# 1. Check TypeScript compilation
npx tsc --noEmit

# 2. Verify production bundler
npm run build

# 3. Preview local server
npm run dev

Visual Verification Checklist

Confirm cover matches the coverStock, coverLayout, and chosen accent seed.
Verify the system glyph (★) appears at Cover dateline, Frame masthead, and Frame footer.
Check mobile breakpoint ($\le$640px) to ensure titles do not break or overflow.
Print preview (Cmd+P or Chrome DevTools print emulation). Ensure all stock colors collapse to dark ink on white, interactive buttons are hidden, and all interactive states stack instead of overlaying.
File standalone edition at artifacts/<N>-<slug>.html and cite it in the issue's audit block in <N>.ts.
Add the issue catalog entry to the index table in docs/design-language.md.
Perform Playwright verification if testing interactive components.