本文へ移動
cccskills
無料GitHub で公開

frontend-design

Aesthetic direction for designs outside an existing brand system

asgeirtj/system_prompts_leaks
インストール方法を見る

含まれるファイル（1）

  • SKILL.md2.4 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Frontend design

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.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

  • Purpose: What problem does this interface solve? Who uses it?
  • Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. Use these for inspiration but design one that is true to the aesthetic direction.
  • Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.

Aesthetics Guidelines

  • Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive, characterful choices. Pair a distinctive display font with a refined body font.
  • Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
  • Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
  • Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
  • Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays.

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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

3d-object

無料

three.js model, downloadable as OBJ or GLB

日本語の概要は準備中です。原文の説明を表示しています。

asgeirtj/system_prompts_leaks7万2026年10月12日 更新

action-items

無料

Manage your private to-do list for the user. Use to add or update tasks, record what they are waiting on, track blockers, mark tasks complete or canceled, and clean up the list. Not for Dreamers or external task trackers.

日本語の概要は準備中です。原文の説明を表示しています。

asgeirtj/system_prompts_leaks7万2026年10月12日 更新

agents

無料

Run a goal as a project: you coordinate. Use for "agents <task>", "take this to done", "work on this in parallel", "what are my threads doing", "pick up <slug>", "resume <slug>", "keep going until it is merged". Under `/agents` you do the work yourself unless it needs several lanes or a long wait — you judge; the plan line says why. No target you could verify (a file, API, number or measure) → the grill interview first, not threads. Read this skill before proposing anything for `/agents`: without it a proposal is in-session subagents.

日本語の概要は準備中です。原文の説明を表示しています。

asgeirtj/system_prompts_leaks7万2026年10月12日 更新

animated-video

無料

Timeline-based motion design

日本語の概要は準備中です。原文の説明を表示しています。

asgeirtj/system_prompts_leaks7万2026年10月12日 更新

apple_healthkit

無料

The user's synced Apple Health (HealthKit) data: daily metrics (steps, distance, calories, heart rate, HRV, VO2max), sleep sessions (stages, quality, efficiency), and workouts.

日本語の概要は準備中です。原文の説明を表示しています。

asgeirtj/system_prompts_leaks7万2026年10月12日 更新

artifact_document

無料

Create, read, edit, or manipulate Word documents (.docx) and Word templates (.dotx). Use whenever a build task's artifact kind is document with the default docx output, or the task mentions a Word doc, .docx, or .dotx, extracts or reorganizes content from one, inserts or replaces images, does find-and-replace in one, or works with tracked changes (redlines) or comments. Covers python-docx generation, raw OOXML editing of existing files, document structure and formatting, and render verification. Not for PDFs, spreadsheets, or Google Docs.

日本語の概要は準備中です。原文の説明を表示しています。

asgeirtj/system_prompts_leaks7万2026年10月12日 更新

asgeirtj のスキルをすべて見る

このスキルの問題を報告する