菜单
Create a new Astro component for the dimitri.codes blog with TypeScript props, Tailwind styling, and correct project conventions. Use when the user wants to add a component, create a new UI element, or build a reusable Astro component.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | add-component |
| description | Create a new Astro component for the dimitri.codes blog with TypeScript props, Tailwind styling, and correct project conventions. Use when the user wants to add a component, create a new UI element, or build a reusable Astro component. |
Create src/components/{ComponentName}.astro. PascalCase filename. The conventions below are self-contained — no need to inspect existing components before creating a new one.
export interface Props with explicit TypeScript types — no any? suffix + default via destructuring<style> — not even scoped. Tailwind is the only styling mechanism.---
export interface Props {
label: string
href?: string
}
const { label, href = "#" } = Astro.props
---
<div class="...">
<!-- content -->
</div>
All defined in src/styles/global.css via @theme and available as Tailwind classes.
| Class | Use case |
|---|---|
text-ink / bg-ink | Structural dark: borders, text, shadow fills — used almost everywhere |
text-primary / bg-primary | Brand blue: header backgrounds, logo, main headings |
text-primary-light / bg-primary-light | Muted labels, subdued text |
text-secondary / bg-secondary | Orange: accents, category badges, hover highlights |
text-secondary-light / bg-secondary-light | Lighter orange |
bg-accent | Yellow: interactive highlights (e.g. button hover background) |
bg-bg | White: card and element backgrounds |
bg-bg-muted | Light grey: page background |
Solid ink-colored offset shadows:
| Class | Offset |
|---|---|
shadow-brut-xs | 2px |
shadow-brut-sm | 4px |
shadow-brut-md | 6px |
shadow-brut-lg | 8px |
font-sans — body copy (Roboto)font-heading — headings, labels, buttons (Montserrat)max-w-content — 950px content widthThe signature effect: an absolute ink div behind the element creates a solid offset shadow.
<div class="relative">
<div class="absolute inset-0 translate-x-2 translate-y-2 bg-ink" aria-hidden="true"></div>
<div class="relative bg-bg border-2 border-ink ...">
<!-- content -->
</div>
</div>
Use translate-x-1 translate-y-1 for small elements (buttons), translate-x-2 translate-y-2 for cards.
Clickable elements animate toward their shadow on hover. The convention differs by element size:
translate-x-1): hover:translate-x-1 hover:translate-y-1 — presses fully into the shadowtranslate-x-2): hover:translate-x-1 hover:translate-y-1 — slides halfway in, shadow remains visibleAlways pair with transition-transform duration-150 relative. Combine with the offset-shadow pattern above.
border-2 border-ink is standard. Never use rounded-* — border-radius is zeroed globally.
font-heading font-bold uppercase tracking-widest for any heading-style or button text.
Validate a blog post's frontmatter, resolve asset paths, and run astro check to catch type errors. Use when the user wants to verify a post is valid, check frontmatter, or validate before committing a new post.
Interviews the user about a blog post idea — one question at a time — to sharpen scope and nail down structure, producing a concise brief an agent can use to assist in writing. Use when the user wants to develop or clarify a blog post idea before writing.
Full coding context for the dimitri.codes Astro blog — commands, architecture, data flow, routing, conventions, and deployment. Load before writing code, reviewing changes, or discussing project conventions.
Generate a catchy excerpt for an existing blog post — resolves the post from a slug, path, or conversation context, produces 3 variants in the blog's established style, then writes the chosen one to the post's frontmatter. Use when the user wants to generate, create, or write an excerpt for a blog post.
Audit all tags across blog posts, surface case inconsistencies, near-duplicates (e.g. Node.js vs NodeJS), and low-frequency tags. Suggests canonical forms and outputs ready-to-use sed rename commands. Use when the user wants to clean up tags, find duplicate tags, audit tag quality, or rename a tag across all posts.
Scaffold a new blog post for the dimitri.codes Astro blog interactively — collects title, categories, tags, and featuredImage conversationally then creates the file with correct frontmatter. Use when the user wants to create a new blog post, write a new article, or add a new post to the blog.