重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
npx skills add https://github.com/pbakaus/impeccable --skill impeccable该技能指导创建独特、生产级的前端界面,避免千篇一律的“AI 垃圾”美学。实现真正可工作的代码,并特别关注美学细节和创意选择。
设计技能在没有项目上下文的情况下会产生通用输出。在进行任何设计工作之前,您必须确认设计上下文。
必需上下文(每个设计技能至少需要):
个别技能可能需要额外的上下文。请查看技能的准备部分以获取具体要求。
关键:您不能通过阅读代码库来推断此上下文。代码告诉您构建了什么,而不是为谁构建或应该给人什么感觉。只有创建者才能提供此上下文。
收集顺序:
.impeccable.md 文件。如果文件存在且包含所需上下文,请继续。/impeccable teach。不要跳过此步骤。不要试图从代码库推断上下文。广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
致力于一个大胆的美学方向:
关键:选择一个清晰的概念方向并精确执行。大胆的极致主义和精致的极简主义都有效。关键在于意图,而非强度。
然后实现可工作的代码,使其:
→ 关于 OpenType 特性、网页字体加载以及更深入的尺度材料,请查阅排版参考。
选择美观、独特且有趣的字体。将独特的展示字体与精致的正文字体配对。
<typography_principles> 始终应用这些原则——无需查阅参考,直接执行:
rem 比例尺(没有主流设计系统在产品界面中使用流体字体)。<font_selection_procedure> 在输入任何字体名称之前执行此操作。
模型的自然失败模式是:“我被告知不要使用 Inter,所以我会选择我第二喜欢的字体,这又变成了新的单一文化。” 通过在每个项目上按顺序执行以下程序来避免这种情况:
步骤 1. 阅读一次简报。为品牌声音写下 3 个具体的词(例如,“温暖、机械、有主见”、“冷静、临床、谨慎”、“快速、密集、不以为然”、“手工制作、有点古怪”)。不要用“现代”或“优雅”——这些是无效的类别。
步骤 2. 根据这些词,列出你通常会选择的 3 种字体。把它们写下来。它们很可能来自这个列表:
<reflex_fonts_to_reject> Fraunces Newsreader Lora Crimson Crimson Pro Crimson Text Playfair Display Cormorant Cormorant Garamond Syne IBM Plex Mono IBM Plex Sans IBM Plex Serif Space Mono Space Grotesk Inter DM Sans DM Serif Display DM Serif Text Outfit Plus Jakarta Sans Instrument Sans Instrument Serif </reflex_fonts_to_reject>
拒绝出现在 reflex_fonts_to_reject 列表中的每一种字体。它们是您训练数据中的默认值,会在不同项目中造成单一文化。特别是 Syne,它是被过度使用的‘独特’展示字体,是 AI 设计的明显标志。永远不要使用它。
步骤 3. 带着 3 个品牌词汇浏览字体目录。来源:Google Fonts、Pangram Pangram、Future Fonts、Adobe Fonts、ABC Dinamo、Klim Type Foundry、Velvetyne。寻找一些符合品牌作为物理对象感觉的字体——博物馆展品说明、手绘商店招牌、1970 年代大型机终端手册、外套内侧的织物标签、印在廉价新闻纸上的儿童读物。拒绝第一眼看上去“很设计感”的东西——那也是训练出来的条件反射。继续寻找。
步骤 4. 交叉检查结果。一个“优雅”简报的合适字体不一定是衬线体。一个“技术”简报的合适字体不一定是无衬线体。一个“温暖”简报的合适字体不是 Fraunces。如果您最终的选择与您的条件反射模式一致,请返回步骤 3。 </font_selection_procedure>
<typography_rules> 要在标题上使用具有流体尺寸(clamp)的模块化字体比例尺。要改变字体粗细和大小以创建清晰的视觉层次。要在不同项目中改变您的字体选择。如果您在上一个项目中使用了衬线展示字体,那么在这个项目中寻找无衬线、等宽或展示字体。
不要使用过度使用的字体,如 Inter、Roboto、Arial、Open Sans 或系统默认字体——但也不要简单地切换到您第二喜欢的字体。上面 reflex_fonts_to_reject 列表中的每一种字体都是被禁止的。看得更远一些。永远不要使用 Syne。它是 AI 设计的明显标志。不要使用等宽字体作为“技术/开发者”氛围的懒惰速记。不要在每个标题上方都放置带有圆角的大图标。它们很少增加价值,反而使网站看起来像模板。不要在整个页面只使用一种字体系列。将独特的展示字体与精致的正文字体配对。不要使用字体尺寸过于接近的扁平化字体层次结构。目标是在级别之间至少有 1.25 的比率。不要用大写字母设置长篇正文段落。保留全大写用于短标签和标题。 </typography_rules>
→ 关于对比度、可访问性和调色板构建的更深入材料,请查阅颜色参考。
致力于一个协调的调色板。具有鲜明强调色的主色调优于胆怯、均匀分布的调色板。
<color_principles> 始终应用这些原则——无需查阅参考,直接执行:
<theme_selection> 主题(浅色 vs 深色)应该源自受众和使用场景,而不是从默认值中挑选。阅读简报并思考:这个产品在何时、由谁、在什么物理环境中使用?
不要将所有东西默认为浅色“以求稳妥”。不要将所有东西默认为深色“以求酷炫”。这两种默认都是懒惰的条件反射。正确的主题是实际用户在其实际场景中想要的主题。 </theme_selection>
<color_rules> 要使用现代 CSS 颜色函数(oklch、color-mix、light-dark)来创建感知均匀、可维护的调色板。要将您的中性色向您的品牌色调倾斜。即使是微妙的暗示也能创造潜意识的凝聚力。
不要在彩色背景上使用灰色文本;那样看起来会褪色。应使用背景颜色的阴影。不要使用纯黑色 (#000) 或纯白色 (#fff)。始终进行色调调整;自然界中从未出现过纯黑/纯白。不要使用 AI 调色板:深色上的青色、紫色到蓝色的渐变、深色背景上的霓虹强调色。不要使用渐变文字来制造冲击力——请参阅下面的 <absolute_bans> 了解严格定义。文字仅使用纯色。不要默认使用带有发光强调色的深色模式。它看起来很“酷”,但不需要实际的设计决策。也不要默认使用浅色模式“以求安全”。关键在于选择,而不是退回到安全选项。 </color_rules>
→ 关于网格、容器查询和光学调整的更深入材料,请查阅空间设计参考。
通过变化的间距创造视觉节奏,而不是到处使用相同的内边距。拥抱不对称和意想不到的构图。为了强调,可以有意识地打破网格。
<spatial_principles> 始终应用这些原则——无需查阅参考,直接执行:
--space-sm、--space-md),而不是像素命名(--spacing-8)。比例尺:4, 8, 12, 16, 24, 32, 48, 64, 96。8pt 太粗糙——您经常会希望两个值之间有 12px 的间距。gap 而不是外边距。它消除了外边距折叠及其带来的清理技巧。grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是适用于卡片式内容的无断点响应式网格。<spatial_rules> 要通过变化的间距创造视觉节奏:紧密的分组、宽松的间隔。要使用 clamp() 实现流体间距,使其在更大的屏幕上呼吸。要使用不对称和意想不到的构图;为了强调,可以有意识地打破网格。
不要把所有东西都包装在卡片里。不是所有东西都需要容器。不要在卡片内嵌套卡片。会造成视觉噪音;请扁平化层次结构。不要使用相同的卡片网格(相同大小的卡片,带有图标 + 标题 + 文本,无限重复)。不要使用英雄指标布局模板(大数字、小标签、支持性统计、渐变强调色)。不要将所有内容居中。左对齐文本配合不对称布局感觉更有设计感。不要到处使用相同的间距。没有节奏,布局会感觉单调。不要让正文文本每行超过约 80 个字符。添加一个最大宽度,如 65–75ch,以便眼睛轻松跟踪。 </spatial_rules>
<absolute_bans> 这些 CSS 模式永远不可接受。它们是最容易识别的 AI 设计标志。匹配并拒绝:如果您发现自己即将编写以下任何内容,请停止并完全用不同的结构重写该元素。
禁令 1:卡片/列表项/提示框/警告框上的侧边条纹边框
border-left: 或 border-right: 且宽度大于 1pxborder-left: 3px solid red、border-left: 4px solid #ff0000、border-left: 4px solid var(--color-warning)、border-left: 5px solid oklch(...) 等。禁令 2:渐变文字
background-clip: text(或 -webkit-background-clip: text)与渐变背景结合使用linear-gradient、radial-gradient 或 conic-gradient 的组合要:使用有意图、有目的的装饰元素来强化品牌。 不要:在卡片、列表项、提示框或警告框上使用大于 1px 的 border-left 或 border-right 作为彩色强调条纹。请参阅上面的 <absolute_bans> 了解严格的 CSS 模式。 不要:到处使用毛玻璃效果(模糊效果、玻璃卡片、装饰性而非有目的地使用的发光边框)。 不要:使用迷你图作为装饰。看起来复杂但传达无意义信息的小图表。 不要:使用带有通用投影的圆角矩形。安全、易忘,可能是任何 AI 的输出。 不要:使用模态框,除非确实没有更好的替代方案。模态框是懒惰的。
→ 关于时间、缓动和减少动效的更深入材料,请查阅动效设计参考。
专注于高影响力的时刻:一个精心编排的页面加载,配合交错的元素出现,比分散的微交互更能创造愉悦感。
要:使用动效来传达状态变化:进入、退出、反馈 要:使用指数缓动(ease-out-quart/quint/expo)实现自然的减速 要:对于高度动画,使用 grid-template-rows 过渡,而不是直接动画化高度 不要:动画化布局属性(宽度、高度、内边距、外边距)。仅使用 transform 和 opacity 不要:使用弹跳或弹性缓动。它们感觉过时且俗气;真实物体是平滑减速的
→ 关于表单、焦点和加载模式的更深入材料,请查阅交互设计参考。
让交互感觉快速。使用乐观 UI:立即更新,稍后同步。
要:使用渐进式披露。从简单开始,通过交互展现复杂性(基本选项在前,高级选项在可展开部分后面;悬停状态揭示次要操作) 要:设计能教授界面用法的空状态,而不仅仅是说“这里什么都没有” 要:让每个交互表面都感觉有意图且响应迅速 不要:重复相同的信息(冗余的标题、重复标题的引言) 不要:让每个按钮都是主要按钮。使用幽灵按钮、文本链接、次要样式;层次结构很重要
→ 关于移动优先、流体设计和容器查询的更深入材料,请查阅响应式设计参考。
要:使用容器查询 (@container) 实现组件级响应式 要:为不同的场景调整界面,而不仅仅是缩小它 不要:在移动设备上隐藏关键功能。调整界面,不要截断它
→ 关于标签、错误信息和空状态的更深入材料,请查阅UX 文案参考。
要:让每个词都有其存在的价值 不要:重复用户已经能看到的信息
关键质量检查:如果您将这个界面展示给某人并说“这是 AI 做的”,他们会立刻相信您吗?如果是,那就是问题所在。
一个独特的界面应该让人问“这是怎么做的?”,而不是“这是哪个 AI 做的?”
回顾上面的“不要”指南。它们是 2024-2025 年 AI 生成作品的指纹。
使实现复杂度与美学愿景相匹配。极致主义的设计需要精心设计的代码,包含大量的动画和效果。极简主义或精致的设计需要克制、精确,并仔细关注间距、排版和细微的细节。
创造性地解读并做出意想不到的选择,使其感觉真正为上下文而设计。没有设计应该是相同的。在浅色和深色主题、不同字体、不同美学之间变化。永远不要在不同代际中趋同于常见的选择。
记住:模型能够完成非凡的创意工作。不要退缩。展示当跳出框框思考并完全致力于一个独特愿景时,真正能够创造出什么。
如果此技能以参数 "craft" 调用(例如,/impeccable craft [功能描述]),请遵循精工流程。将任何附加参数作为功能描述传递。
如果此技能以参数 "teach" 调用(例如,/impeccable teach),请跳过上述所有设计工作,转而运行以下教学模式。这是一次性设置,用于收集项目的设计上下文。
在提问之前,彻底扫描项目以发现您能了解的信息:
记录您已了解的信息以及仍不清楚的地方。
直接向用户提问,以澄清您无法推断的内容。仅关注您无法从代码库推断的内容:
如果答案已从代码库探索中明确,则跳过相关问题。
将您的发现和用户的回答综合成一个 ## 设计上下文 部分:
## 设计上下文
### 用户
[他们是谁,他们的场景,要完成的任务]
### 品牌个性
[声音、语调、3 词个性、情感目标]
### 美学方向
[视觉基调、参考、反面参考、主题]
### 设计原则
[从对话中得出的 3-5 条应指导所有设计决策的原则]
将此部分写入项目根目录下的 .impeccable.md 文件中。如果文件已存在,请就地更新设计上下文部分。
然后直接询问用户,他们是否也希望将设计上下文附加到 .github/copilot-instructions.md。如果是,请也在那里附加或更新该部分。
确认完成并总结现在将指导所有未来工作的关键设计原则。
每周安装量
3.0K
代码仓库
GitHub 星标数
17.6K
首次出现
1 天前
安全审计
安装于
codex2.9K
opencode2.9K
cursor2.9K
github-copilot2.9K
gemini-cli2.9K
kimi-cli2.9K
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work.
Required context (every design skill needs at minimum):
Individual skills may require additional context. Check the skill's preparation section for specifics.
CRITICAL : You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context.
Gathering order:
.impeccable.md from the project root. If it exists and contains the required context, proceed.Commit to a BOLD aesthetic direction:
CRITICAL : Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work. The key is intentionality, not intensity.
Then implement working code that is:
→ Consulttypography reference for OpenType features, web font loading, and the deeper material on scales.
Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font.
<typography_principles> Always apply these — do not consult a reference, just do them:
rem scales for app UIs and dashboards (no major design system uses fluid type in product UI).<font_selection_procedure> DO THIS BEFORE TYPING ANY FONT NAME.
The model's natural failure mode is "I was told not to use Inter, so I will pick my next favorite font, which becomes the new monoculture." Avoid this by performing the following procedure on every project, in order:
Step 1. Read the brief once. Write down 3 concrete words for the brand voice (e.g., "warm and mechanical and opinionated", "calm and clinical and careful", "fast and dense and unimpressed", "handmade and a little weird"). NOT "modern" or "elegant" — those are dead categories.
Step 2. List the 3 fonts you would normally reach for given those words. Write them down. They are most likely from this list:
<reflex_fonts_to_reject> Fraunces Newsreader Lora Crimson Crimson Pro Crimson Text Playfair Display Cormorant Cormorant Garamond Syne IBM Plex Mono IBM Plex Sans IBM Plex Serif Space Mono Space Grotesk Inter DM Sans DM Serif Display DM Serif Text Outfit Plus Jakarta Sans Instrument Sans Instrument Serif </reflex_fonts_to_reject>
Reject every font that appears in the reflex_fonts_to_reject list. They are your training-data defaults and they create monoculture across projects. Syne in particular is the most overused "distinctive" display font and is an instant AI design tell. Never use it.
Step 3. Browse a font catalog with the 3 brand words in mind. Sources: Google Fonts, Pangram Pangram, Future Fonts, Adobe Fonts, ABC Dinamo, Klim Type Foundry, Velvetyne. Look for something that fits the brand as a physical object — a museum exhibit caption, a hand-painted shop sign, a 1970s mainframe terminal manual, a fabric label on the inside of a coat, a children's book printed on cheap newsprint. Reject the first thing that "looks designy" — that's the trained reflex too. Keep looking.
Step 4. Cross-check the result. The right font for an "elegant" brief is NOT necessarily a serif. The right font for a "technical" brief is NOT necessarily a sans-serif. The right font for a "warm" brief is NOT Fraunces. If your final pick lines up with your reflex pattern, go back to Step 3. </font_selection_procedure>
<typography_rules> DO use a modular type scale with fluid sizing (clamp) on headings. DO vary font weights and sizes to create clear visual hierarchy. DO vary your font choices across projects. If you used a serif display font on the last project, look for a sans, monospace, or display face on this one.
DO NOT use overused fonts like Inter, Roboto, Arial, Open Sans, or system defaults — but also do not simply switch to your second-favorite. Every font in the reflex_fonts_to_reject list above is banned. Look further. DO NOT use Syne. Ever. It is an instant AI design tell. DO NOT use monospace typography as lazy shorthand for "technical/developer" vibes. DO NOT put large icons with rounded corners above every heading. They rarely add value and make sites look templated. DO NOT use only one font family for the entire page. Pair a distinctive display font with a refined body font. DO NOT use a flat type hierarchy where sizes are too close together. Aim for at least a 1.25 ratio between steps. DO NOT set long body passages in uppercase. Reserve all-caps for short labels and headings. </typography_rules>
→ Consultcolor reference for the deeper material on contrast, accessibility, and palette construction.
Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
<color_principles> Always apply these — do not consult a reference, just do them:
<theme_selection> Theme (light vs dark) should be DERIVED from audience and viewing context, not picked from a default. Read the brief and ask: when is this product used, by whom, in what physical setting?
Do not default everything to light "to play it safe." Do not default everything to dark "to look cool." Both defaults are the lazy reflex. The correct theme is the one the actual user wants in their actual context. </theme_selection>
<color_rules> DO use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes. DO tint your neutrals toward your brand hue. Even a subtle hint creates subconscious cohesion.
DO NOT use gray text on colored backgrounds; it looks washed out. Use a shade of the background color instead. DO NOT use pure black (#000) or pure white (#fff). Always tint; pure black/white never appears in nature. DO NOT use the AI color palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. DO NOT use gradient text for impact — see <absolute_bans> below for the strict definition. Solid colors only for text. DO NOT default to dark mode with glowing accents. It looks "cool" without requiring actual design decisions. DO NOT default to light mode "to be safe" either. The point is to choose, not to retreat to a safe option. </color_rules>
→ Consultspatial reference for the deeper material on grids, container queries, and optical adjustments.
Create visual rhythm through varied spacing, not the same padding everywhere. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis.
<spatial_principles> Always apply these — do not consult a reference, just do them:
--space-sm, --space-md), not pixel-named (--spacing-8). Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96. 8pt is too coarse — you'll often want 12px between two values.gap instead of margins for sibling spacing. It eliminates margin collapse and the cleanup hacks that come with it.grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) is the breakpoint-free responsive grid for card-style content.<spatial_rules> DO create visual rhythm through varied spacing: tight groupings, generous separations. DO use fluid spacing with clamp() that breathes on larger screens. DO use asymmetry and unexpected compositions; break the grid intentionally for emphasis.
DO NOT wrap everything in cards. Not everything needs a container. DO NOT nest cards inside cards. Visual noise; flatten the hierarchy. DO NOT use identical card grids (same-sized cards with icon + heading + text, repeated endlessly). DO NOT use the hero metric layout template (big number, small label, supporting stats, gradient accent). DO NOT center everything. Left-aligned text with asymmetric layouts feels more designed. DO NOT use the same spacing everywhere. Without rhythm, layouts feel monotonous. DO NOT let body text wrap beyond ~80 characters per line. Add a max-width like 65–75ch so the eye can track easily. </spatial_rules>
<absolute_bans> These CSS patterns are NEVER acceptable. They are the most recognizable AI design tells. Match-and-refuse: if you find yourself about to write any of these, stop and rewrite the element with a different structure entirely.
BAN 1: Side-stripe borders on cards/list items/callouts/alerts
border-left: or border-right: with width greater than 1pxborder-left: 3px solid red, border-left: 4px solid #ff0000, border-left: 4px solid var(--color-warning), border-left: 5px solid oklch(...), etc.BAN 2: Gradient text
background-clip: text (or -webkit-background-clip: text) combined with a gradient backgroundlinear-gradient, radial-gradient, or conic-gradientDO: Use intentional, purposeful decorative elements that reinforce brand. DO NOT: Use border-left or border-right greater than 1px as a colored accent stripe on cards, list items, callouts, or alerts. See <absolute_bans> above for the strict CSS pattern. DO NOT: Use glassmorphism everywhere (blur effects, glass cards, glow borders used decoratively rather than purposefully). DO NOT: Use sparklines as decoration. Tiny charts that look sophisticated but convey nothing meaningful. DO NOT: Use rounded rectangles with generic drop shadows. Safe, forgettable, could be any AI output. DO NOT: Use modals unless there's truly no better alternative. Modals are lazy.
→ Consultmotion reference for timing, easing, and reduced motion.
Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
DO : Use motion to convey state changes: entrances, exits, feedback DO : Use exponential easing (ease-out-quart/quint/expo) for natural deceleration DO : For height animations, use grid-template-rows transitions instead of animating height directly DON'T : Animate layout properties (width, height, padding, margin). Use transform and opacity only DON'T : Use bounce or elastic easing. They feel dated and tacky; real objects decelerate smoothly
→ Consultinteraction reference for forms, focus, and loading patterns.
Make interactions feel fast. Use optimistic UI: update immediately, sync later.
DO : Use progressive disclosure. Start simple, reveal sophistication through interaction (basic options first, advanced behind expandable sections; hover states that reveal secondary actions) DO : Design empty states that teach the interface, not just say "nothing here" DO : Make every interactive surface feel intentional and responsive DON'T : Repeat the same information (redundant headers, intros that restate the heading) DON'T : Make every button primary. Use ghost buttons, text links, secondary styles; hierarchy matters
→ Consultresponsive reference for mobile-first, fluid design, and container queries.
DO : Use container queries (@container) for component-level responsiveness DO : Adapt the interface for different contexts, not just shrink it DON'T : Hide critical functionality on mobile. Adapt the interface, don't amputate it
→ Consultux-writing reference for labels, errors, and empty states.
DO : Make every word earn its place DON'T : Repeat information users can already see
Critical quality check : If you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, that's the problem.
A distinctive interface should make someone ask "how was this made?" not "which AI made this?"
Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025.
Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations.
Remember: the model is capable of extraordinary creative work. Don't hold back. Show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
If this skill is invoked with the argument "craft" (e.g., /impeccable craft [feature description]), follow the craft flow. Pass any additional arguments as the feature description.
If this skill is invoked with the argument "teach" (e.g., /impeccable teach), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project.
Before asking questions, thoroughly scan the project to discover what you can:
Note what you've learned and what remains unclear.
ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase:
Skip questions where the answer is already clear from the codebase exploration.
Synthesize your findings and the user's answers into a ## Design Context section:
## Design Context
### Users
[Who they are, their context, the job to be done]
### Brand Personality
[Voice, tone, 3-word personality, emotional goals]
### Aesthetic Direction
[Visual tone, references, anti-references, theme]
### Design Principles
[3-5 principles derived from the conversation that should guide all design decisions]
Write this section to .impeccable.md in the project root. If the file already exists, update the Design Context section in place.
Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to .github/copilot-instructions.md. If yes, append or update the section there as well.
Confirm completion and summarize the key design principles that will now guide all future work.
Weekly Installs
3.0K
Repository
GitHub Stars
17.6K
First Seen
1 day ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex2.9K
opencode2.9K
cursor2.9K
github-copilot2.9K
gemini-cli2.9K
kimi-cli2.9K
React视图过渡API使用指南:实现原生浏览器动画与状态管理
7,500 周安装