Agent Skills
› NeverSight/learn-skills.dev
› astro-section-implementation
astro-section-implementation
GitHub用于在 Astro 仓库中创建、重构或清理部分（Section）模块。指导如何编写语义化标记、管理 CSS、处理响应式布局及客户端水合决策，确保代码可维护性并避免模板混乱。
Trigger Scenarios
创建新的 Astro 部分组件
重构现有部分结构
提取重复的部分模块
清理重复的部分代码
调整 CTA 块结构
决定 Astro 组件内的静态与客户端交互
Install
npx skills add NeverSight/learn-skills.dev --skill astro-section-implementation -g -y
SKILL.md
Frontmatter
{
"name": "astro-section-implementation",
"description": "Use when creating or refactoring Astro sections, reusable section modules, section-specific markup, or section-level CSS in this repository. Trigger for section extraction, repeated section cleanup, CTA block restructuring, and static-vs-client decisions inside Astro components."
}
Astro Section Implementation
Build sections that stay readable, mostly static, and easy to maintain.
Workflow
- Inspect the nearest matching section, component, and stylesheet pattern.
- Decide whether the work belongs in an existing family or needs one focused file.
- Define the section contract before writing markup.
- Keep section data and repeated markup out of tangled template conditionals.
Rules
- Keep markup semantic and readable.
- Prefer shared data, arrays, and focused helpers over repeated section blocks.
- Use explicit typed fields for semantic content that other components depend on.
- Do not key business meaning off array indexes or label text unless the UI is purely presentational.
- Use hydration only when the section has real client behavior.
- Match the repo's CSS organization so styles remain discoverable.
- Keep responsive behavior deliberate; do not let desktop composition collapse into random mobile stacking.
- Split desktop and mobile markup when the reading pattern genuinely changes; do not force one DOM shape to do two incompatible jobs.
- For accordions and carousels, keep a static fallback structure that remains readable if JS is delayed or absent.
- Scope scripts to the section they serve.
- Guard DOM queries and event listeners.
- Handle Astro navigation or re-entry events if the feature depends on runtime initialization.
- Remove or rename stale selectors when section markup changes.
Section Audit Checklist
- Can a new reader understand the section job from its heading and first sentence?
- Are the most important labels, outputs, or actions visible without markup gymnastics?
- Is the mobile pattern chosen intentionally: stack, accordion, or carousel?
- Does the data model still make sense if content editors reorder items later?
Version History
- e0220ca Current 2026-07-05 23:25
