fluxly Search skills… ⌘K 中文 Publish

optimizely-frontend-component

Design Community
Fluxly profile Facts only: domain, agents, trust score, runtime, permissions and network
Domain
Design
Compatible agents
  • Claude Code
  • Cursor
  • Cline
  • Codex
  • Windsurf
  • Gemini CLI
  • +20
Trust score
88 / 100 · community maintained
Author / version / license
@tomevault-io · no license declared
Token usage
Lean
Setup complexity
Guided setup
External API key
Not required
Operating systems
macOS · Linux · Windows
Runtime requirements
No special requirements
Permissions
  • Read-only
  • Write / modify
  • Shell exec
Network behavior
Local-only
Install commands
26 variants

Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.

Heads up: 未限定 allowed-tools，默认拥有全部工具权限。

Output preview optimizely-frontend-component.preview 
---
name: optimizely-frontend-component
description: Conventions for building accessible, RTL-ready, modular layout/UI components in this Next.js 16…
category: design
runtime: no special runtime
---

# optimizely-frontend-component output preview

## PART A: Task fit
- Use case: Conventions for building accessible, RTL-ready, modular layout/UI components in this Next.js 16 + React 19 + Tailwind 4 + Headless UI 2 codebase. Use this skill whenever the user asks to: (1) build, refactor, or extend any component under src/components/layout/** (Header, Footer, Nav, Sidebar, Drawer); (2) add interactive UI primitives like dropdowns, mega menus, dialogs, popovers, disclosures, command palettes, language switchers, mobile menus; (3) make existing UI keyboard-accessible or RTL-safe; (4) introduce a new family of UI components (cards, banners, ctas) where the modular file layout, data colocation, and a11y/RTL principles below apply. This skill captures the patterns used in src/components/layout/Header/ and src/components/layout/Footer/ — the canonical references. Use when this capability is needed..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “When to apply this skill / Core principles / Quick start” and do not present inference as author intent.

## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “Conventions for building accessible, RTL-ready, modular layout/UI components in this Next.js 16 + React 19 + Tailwind 4 + Headless UI 2 codebase. Use this skill whenever the user asks to: (1) build, refactor, or extend any component under src/components/layout/** (Header, Footer, Nav, Sidebar, Drawer); (2) add interactive UI primitives like dropdowns, mega menus, dialogs, popovers, disclosures, command palettes, language switchers, mobile menus; (3) make existing UI keyboard-accessible or RTL-safe; (4) introduce a new family of UI components (cards, banners, ctas) where the modular file layout, data colocation, and a11y/RTL principles below apply. This skill captures the patterns used in src/components/layout/Header/ and src/components/layout/Footer/ — the canonical references. Use when this capability is needed.”.
- **02** When the source has headings, the agent prioritizes “When to apply this skill / Core principles / Quick start” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.

## Running Rules
- read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options.
Interpretation is structured for decision-making; original keeps the upstream SKILL.md unchanged.

Decide Fit First

  • Core job: Conventions for building accessible, RTL-ready, modular layout/UI components in this Next.js 16 + React 19 + Tailwind 4 + Headle…
  • Best fit: Use it when the task has reusable inputs, steps, and validation criteria rather than a one-off answer.
  • Avoid forcing it: If the source lacks commands, platform support, or external-service evidence, keep those fields unknown instead of guessing.

Design Intent

  • Structure: The skill is organized around “When to apply this skill”, “Core principles”, “Quick start”, “Authoring checklist”, showing how the author expects the agent to judge fit, collect context, and produce verifiable output.
  • Trigger evidence: Prioritize the author’s wording around when to use it, what context to collect, and what output shape to produce.
  • Evidence boundary: Author text states facts, repository files prove commands and paths, and Fluxly only adds fit, limits, and usage judgment.

How To Use It

  • Inputs: Provide target material, scope, expected result, forbidden changes, and validation method.
  • Invocation: Name optimizely-frontend-component directly; if the source includes slash commands, start with the command and then add task context.
  • Validation: Start small and check whether the result follows “When to apply this skill / Core principles / Quick start” before expanding.

Boundaries And Review

  • Dependencies: It usually needs no extra API key, so start with a small validation task.
  • Permissions: Declared permissions include read / write / shell-exec; ask the agent to state file, command, and rollback boundaries before acting.
  • Quality bar: A useful result names the deliverable, evidence, and next action. Generic prose means the task needs tighter context.

Discussion

Powered by GitHub Discussions. Sign in with GitHub to comment, react, or subscribe.