Individual skill

frontend

Context-led frontend design: art direction derived from product, audience, brand and the existing system, not generic defaults. Named mood variants listed inside. Triggers: frontend, UI, CSS, styling, visual, theme, component, layout, responsive, accessibility, animation.

plugins/ariaxhan/kernel-claude/skills/frontend/SKILL.md

Read pinned source

Source commit d780783eba4ecc7c8b9429f95c9362df95f07c61

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Network or broad shell
Last checked: Nov 4, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 1,532
Repository last updated: Nov 6, 2026
License: Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

ai-coding Repository topic
awesome Repository topic
awesome-list Repository topic
codex Repository topic
codex-plugins Repository topic
openai Repository topic
codex-skill Repository topic
codex-skills Repository topic
marketplace Repository topic
codex-marketplace Repository topic
design Derived category
marketing Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 6,887 bytes
SKILL.mdcore · 6,887 bytes
SKILL.mdcore · 6,887 bytes
motion/cursor-field.mddoc · 1,858 bytes
motion/grand-tour.mddoc · 2,140 bytes
motion/haunted-machine.mddoc · 1,874 bytes
motion/held-breath.mddoc · 1,879 bytes
motion/kinetic-type.mddoc · 1,874 bytes
motion/liquid-material.mddoc · 2,059 bytes
motion/one-surface.mddoc · 1,950 bytes
motion/real-weight.mddoc · 1,861 bytes
reference/component-sources.mddoc · 4,506 bytes
reference/design-research.mddoc · 12,638 bytes
variants/abyss.mddoc · 1,440 bytes
variants/arctic.mddoc · 1,363 bytes
variants/ember.mddoc · 1,380 bytes
variants/patina.mddoc · 1,394 bytes
variants/signal.mddoc · 1,447 bytes
variants/spatial.mddoc · 1,460 bytes
variants/substrate.mddoc · 1,447 bytes
variants/verdant.mddoc · 1,430 bytes
variants/void.mddoc · 1,409 bytes

Read excerpt


<skill id="frontend">

<purpose>
Make interfaces feel intentional because their visual choices fit the actual product.
Distinctiveness is not a pile of effects. It is a coherent point of view with fewer
unexamined defaults.
</purpose>

<context-fit>
Before styling, recover the evidence already present in the task and repository:

1. Product: what the interface does and which action matters most.
2. Audience and use context: device, environment, familiarity, urgency, accessibility needs.
3. Brand: existing tokens, logo, type, imagery, voice, screenshots, and reference qualities.