前端生成
- 作者仓库星标 0
- 作者更新于 实时读取
- 作者仓库 skills-registry
- 领域
- 设计与多媒体
- 兼容 Agent
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- 信任分
- 88 / 100 · 社区维护
- 作者 / 版本 / 许可
- @tomevault-io · 未声明 license
- Token 消耗评级
- 低消耗
- 接入复杂程度
- 需简单配置
- 是否需要外部 API Key
- 不需要
- 兼容的系统
- macOS · Linux · Windows
- 底层运行要求
- 无特殊要求
- 文件与系统权限
-
- 只读
- 允许写入 / 修改
- Shell 执行
- 网络行为
- 仅限本地
- 安装命令数
- 26 条
档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。
需要注意： 未限定 allowed-tools，默认拥有全部工具权限。
---
name: optimizely-frontend-component
description: Conventions for building accessible, RTL-ready, modular layout/UI components in this Next.js 16…
category: 设计与多媒体
runtime: 无特殊运行时
---
# optimizely-frontend-component 输出预览
## PART A: 任务判断
- 适用问题：视觉内容、演示材料、信息图或设计交付。
- 输入要求：目标材料、限制条件、期望输出和验收方式。
- 证据边界：围绕“When to apply this skill / Core principles / Quick start”读取原文规则，不把推断写成作者承诺。
## PART B: 执行结果
- **01** 任务判断：确认你的需求是否属于视觉内容、演示材料、信息图或设计交付，并标出输入、限制和预期结果。
- **02** 执行计划：优先按“When to apply this skill / Core principles / Quick start”拆成步骤，说明每一步会读取什么、修改什么、产出什么。
- **03** 交付结果：给出可复制的命令、文件改动、检查清单或内容草稿，并说明如何继续迭代。
- **04** 风险边界：结合 读取文件、写入/修改文件、执行终端命令、主要在本地完成、通常不需要额外 API Key 给出执行前确认项。
## Running Rules
- 读取文件、写入/修改文件、执行终端命令；主要在本地完成；通常不需要额外 API Key。
- 先小样例验证，再放大到真实任务。
- 交付时同时给结果、检查口径和下一步迭代建议。原文没有稳定的斜杠命令要求。安装验证后通常全局生效，直接在对话里点名这个 Skill 并描述任务即可。
告诉 Agent 目标文件或材料、期望结果、不可改范围、是否允许联网或执行命令。本 Skill 的权限画像是：读取文件、写入/修改文件、执行终端命令。
先用一个小任务确认它会围绕“When to apply this skill / Core principles / Quick start”工作；涉及文件或命令时，先看 diff、日志、预览或测试结果。
检查最终产物是否包含明确结果、必要证据和下一步动作；如果输出泛泛而谈，就补充输入、边界和验收标准后重跑。
---
name: optimizely-frontend-component
description: Conventions for building accessible, RTL-ready, modular layout/UI components in this Next.js 16…
category: 设计与多媒体
source: tomevault-io/skills-registry
---
# optimizely-frontend-component
## 什么时候使用
- 把设计与视觉方向的常用动作沉淀成 Agent 可调用的技能 适合处理界面、视觉、封面、信息图或演示材料交付，核心价值是把输入、判断、执行、验证和交付边界固定下来，避免 Agent 泛泛回答。 把任务拆成可执行、可检查、可继续迭代的步骤…
- 面向视觉内容、演示材料、信息图或设计交付，优先处理能明确输入、步骤和验收标准的工作。
## 需要提供什么
- 目标材料、目录范围、期望结果和不可改动内容。
- 是否允许联网、执行命令、读写文件或调用外部服务。
## 执行规则
- 围绕「When to apply this skill / Core principles / Quick start」组织步骤，不把推断写成作者事实。
- 读取文件、写入/修改文件、执行终端命令；主要在本地完成；通常不需要额外 API Key。
- 先跑小样例，确认结果可检查后再扩大任务范围。
## 输出要求
- 给出最终产物、关键证据、验证方式和下一步动作。
- 信息不足时标记 unknown，不编造命令、平台或依赖。作者原文负责流程事实；仓库文件负责来源和命令；流狐只补充适用场景、限制和质量判断。
skill "optimizely-frontend-component" {
输入层 -> 用户目标 + 目标文件 + 禁止范围 + 验收标准
上下文层 -> When to apply this skill / Core principles / Quick start
规则层 -> SKILL.md 触发条件 / 执行顺序 / 输出格式
运行层 -> 无特殊运行时 | 读取文件、写入/修改文件、执行终端命令 | 主要在本地完成
安全层 -> 通常不需要额外 API Key + 小任务验证 + diff / 日志复核
输出层 -> 可复制结果 + 检查清单 + 下一步迭代
}Optimizely Frontend Component Conventions
Principles for building UI components in this codebase. The Header at src/components/blocks/Header/ and Footer at src/components/blocks/Footer/ are the canonical reference implementations — when in doubt, mirror their structure.
When to apply this skill
Apply to anything that renders interactive UI:
- Layout chrome —
Header,Footer,Sidebar,Drawer, breadcrumbs. - Interactive primitives — dropdowns, mega menus, popovers, disclosures, dialogs, tooltips, tabs, listboxes, comboboxes, language switchers, mobile menus.
- Composable visual blocks where children may be added later (cards, banners, CTAs) and the structure should stay open for extension.
Do not apply this skill to pure CMS content type definitions (use optimizely-cms-content-types) or deployment scripts (use optimizely-frontend-hosting).
Core principles
Each principle has a topical reference under references/ with the full detail.
Modular file layout. One concern per file. Subcomponents live next to their parent in a feature folder. Data is colocated. →
references/file-layout.mdHeadless UI by default. Any interactive primitive that has a Headless UI equivalent uses it. Don't roll bespoke open/close state machines. The v2 specifics (when to use
transitionprop,anchorinstead of hand-positioning, the click-outside bug) matter. →references/headless-ui.mdAccessibility is part of "done." Native semantics first, visible focus rings on every interactive element, ARIA wired correctly on toggles, list semantics on lists. →
references/accessibility.mdRTL by default. Use logical CSS properties so
<html dir="rtl">flips the layout for free. Never hand-writedir="rtl"on individual elements. →references/rtl.mdOpen-for-extension data shapes. Schemas should let new entries (children, items, sections) render correctly with zero component edits. The mega menu pattern is the canonical example. →
references/mega-menu-pattern.mdServer-first, client when needed. Mark a file
"use client"only when it actually uses hooks, refs, event handlers, or browser APIs. →references/file-layout.md(Server vs client section)Keep visual styling out of CMS content types. Visual variants belong in display templates (see
optimizely-cms-content-types), not in component prop enums.High-level architecture and patterns. This skill captures the high-level architecture and patterns for layout components, including the rationale for the principles above and how they work together to create a scalable, maintainable codebase. →
references/layout-architecture.mdContent resolution. — how content resolution works for layout components, including the use of
getContentandgetLinkhelpers, theContentResolvercomponent, and best practices for structuring content types to work well with these patterns. →references/content-resolution.md
Quick start
For a typical new layout component (a drawer, a sidebar, a mega menu, etc.):
- Read
references/file-layout.mdfor the folder structure and TypeScript conventions. - Read
references/headless-ui.mdto pick the right primitive and avoid the v2 pitfalls. - Read
references/accessibility.mdandreferences/rtl.mdto know what "done" looks like. - Look at
references/header-reference.md(CMS driven) andreferences/footer-reference.md(CMS driven) for annotated walkthroughs of how each principle is applied. - If something breaks, check
references/troubleshooting.mdfirst — most frontend bugs in this codebase have already been encountered and documented.
Authoring checklist
Before considering any layout/UI component done:
- File layout follows
src/components/layout/<Feature>/with one concern per file; - Every interactive primitive uses Headless UI; no hand-rolled open/close state for things HUI covers.
npm run lintis clean;npx tsc --noEmitis clean.- Tab through every interactive surface — focus is always visible, Esc closes overlays, click-outside closes overlays.
- Set
<html dir="rtl">in DevTools and confirm the layout mirrors with no overlap, no off-canvas, and direction-implying icons (arrows) flip while neutral icons (chevrons-down) stay. - At the
lgbreakpoint boundary, desktop and mobile UIs are mutually exclusive. - Adding a new entry to the data file renders correctly with zero component edits.
References
references/file-layout.md— Folder structure, data colocation, server-vs-client split, naming, TypeScript conventions.references/headless-ui.md— Primitive lookup table, v2 specifics, annotated examples for Popover and Disclosure.references/accessibility.md— A11y checklist with the rationale and code patterns for each item.references/rtl.md— RTL principles, logical-property mapping,useDocumentLanguagehook, what to flip and what not to.references/mega-menu-pattern.md— Schema and adaptive-layout rules; how to add a new category with zero component edits.references/header-reference.md— Annotated walkthrough of the Header (state-owning shell, Headless UI, RTL toggle, mega menu, mobile drawer); the Header refactor fix log.references/footer-reference.md— Annotated walkthrough of the Footer (server-rendered, content-info landmark, link grid, social icons); the Footer audit fix log; responsive-grid defaults.references/troubleshooting.md— Click-outside doesn't close, Tab stops invisible, span-as-link, RTL doesn't mirror, hydration warnings, file-truncation recovery.references/search-reference— Annotated walkthrough of the Search
Source: abhinavssingh/training-saas-site — distributed by TomeVault.
先判断是否适合
作者设计意图
作者的方法与取舍
边界和复核