Design distinctive web interfaces when no existing brand guidelines apply. The skill helps define a visual direction and carry it through typography, color, layout, backgrounds, and animation in HTML, with implementation detail matched to the chosen style.
Aesthetic direction for designs outside an existing brand system
frontend-design helps design and implement HTML interfaces when no existing brand or design system governs the work. It starts by clarifying the interface’s purpose, its users, and the element people should remember. From there, it establishes a consistent visual direction, such as minimal, editorial, or inspired by nature.
That direction guides font pairings, colors managed with CSS variables, spacing, overlapping elements, background textures, and animation. These choices are developed together to give the interface a distinctive and consistent appearance.
Use it for a new page without brand guidelines or for a UI that needs its own visual character. It also suits restrained interfaces where the work involves refining typography and spacing, rather than simply adding decoration. Implementation complexity is adjusted to suit the chosen visual direction.
This guide applies to interfaces that are not governed by an existing brand or design system.
This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.
AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.
The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 23, 2026. Treat it as a guide and read the original before installing.
Review the instructions the agent will receive before you install.
Use this guidance when designing frontend/UI work that is NOT governed by an existing brand or design system. Create distinctive HTML with exceptional attention to aesthetic details and creative choices.
Before coding, understand the context and commit to a BOLD aesthetic direction:
Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.
Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on the same choices across generations.
Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate animations and effects. Minimalist designs need restraint, precision, and careful attention to spacing and subtle details.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create a 3D object with three.js, inspect it from every angle in an interactive viewer, and download it as OBJ + MTL or GLB for use in other 3D applications.
Maintain a private task list with deadlines, next steps, waiting parties, and blockers. Update progress and dependencies, merge duplicate items, and archive closed tasks so ongoing commitments stay clear and easy to follow.
Coordinate a task from a verifiable goal through completion. Handle work directly or split independent tasks across separate agent sessions, track progress, verify results, and arrange pull request merging when included in the goal.
Create animated HTML pages with smooth scene transitions and playback controls. An editable timeline lets users adjust scene lengths and speeds, with fixed landscape or portrait layouts prepared for video export.
Review synced Apple Health records, including steps, heart rate, sleep, and workouts. Retrieve daily summaries or detailed samples for a chosen period, and check sync status and missing data before interpreting the results.
Create and edit Word documents and templates, reorganize text, replace images, and work with tracked changes or comments. Apply proper headings and lists, then render every page to check its appearance before delivery.