{"id":"3a2187db-3370-4383-9ec7-e8b6bf1ec9b9","shortId":"QfDZ28","kind":"skill","title":"fd","tagline":"Frontend design mode for strong visual direction, UI polish, redesigns, landing pages, and production-grade interface work, including shadcn-based surfaces. Use when the user says `/fd` or explicitly asks for better design, styling, layout, visual quality, or UX polish.","description":"# FD\n\nUse this as a frontend design and polish mode. The goal is not to make every UI louder; the goal is to make it feel intentionally designed.\n\n## Claude-First Mode\n\nIf local `claude` CLI is available, treat it as the design specialist for meaningful frontend work instead of relying on Codex's taste alone.\n\n- Use a single default workflow: delegate the first pass with `claude-design-bridge fd --apply`, then inspect Claude's diff, fix any integration issues, and run verification yourself.\n- Only use `claude-design-bridge fd --plan` when the user explicitly wants critique-only guidance without edits, or when apply mode is clearly unsafe for the task.\n- Include the user request, relevant paths, constraints, and any established design language in the delegated prompt.\n- Treat Claude's visual direction and implementation choices as the primary design authority, then use Codex to inspect, integrate, test, and clean up.\n- Fall back to Codex-native design work only if the bridge is unavailable, unauthenticated, or clearly fails.\n\n## Post-Claude Audit\n\nWhen Claude handled the first implementation pass, Codex should assume responsibility for the final integration quality.\n\n- review the actual diff instead of trusting the visual pass blindly\n- fix truncation, overflow, wrapping, density, spacing collisions, and awkward responsive breakpoints\n- check keyboard/focus states, aria state integrity, and reduced-motion or contrast regressions when relevant\n- preserve filtering, routing, data flow, and existing interaction logic unless the user explicitly asked for behavior changes\n- catch SSR, hydration, typing, lint, and small-but-important maintainability issues that a design-first pass may miss\n- keep the design intent, but tighten the engineering finish\n\n## Default Taste\n\nUnless the user explicitly asks for a different direction, bias the design toward:\n\n- Apple HIG-style clarity and restraint\n- Jony Ive-style product thinking: simple, refined, modern, reduced, calm\n- crisp hierarchy, generous spacing, careful materials, subtle motion, and high legibility\n- elegance through reduction, not decoration\n\n## Core Rule\n\nChoose a clear visual direction that fits the context, then implement it with enough craft that the result feels deliberate rather than generated.\n\n## First Pass\n\nBefore changing code:\n\n- Inspect the existing product, codebase, tokens, components, layouts, and visual language.\n- Decide whether this is an **existing-system refinement** or a **new-surface design** task.\n- Identify the user-facing goal, the primary audience, the key constraint, and the one visual idea worth remembering.\n\nIf the product already has a strong design system, preserve it and improve within it unless the user explicitly asks for a bigger shift.\n\n## Adjust To The Surface\n\nTune the design to the kind of interface:\n\n- **Marketing or landing pages**: push concept, typography, narrative, and memorable hero moments.\n- **Product UI or dashboards**: prioritize hierarchy, density control, affordance, readability, and fast scanning over spectacle.\n- **Forms, settings, and CRUD surfaces**: clarity first; polish should reduce friction, not compete with the task.\n- **Mobile-heavy views**: simplify composition, tighten spacing logic, and make the primary action obvious.\n- **Data-heavy views**: use typography, spacing, grouping, and emphasis to make information legible before adding decoration.\n\nIf the brief is ambiguous, bias toward clarity with one strong visual idea instead of stacking effects.\n\n## Design Direction\n\nPick and commit to one direction instead of mixing weak ideas:\n\n- visual thesis in one sentence\n- typography approach\n- color and contrast strategy\n- layout rhythm and spacing\n- motion style\n- one signature detail\n\nGood directions can be restrained or bold: editorial, quiet luxury, industrial, playful, sharp enterprise, tactile utility, cinematic, brutalist, soft physical, retro-futurist, and so on. The important part is consistency and intent.\n\n## Execution Rules\n\n- **Typography**: Avoid generic defaults when the surface is design-led. Use purposeful font pairings and hierarchy. If the product already uses a house style, sharpen it instead of replacing it casually.\n- **Color**: Use semantic tokens or CSS variables. Favor a disciplined palette with a clear dominant tone and a few strong accents over muddy balance.\n- **Layout**: Create rhythm with spacing, scale, alignment, and contrast. Use asymmetry, overlap, density shifts, or generous negative space when it serves the concept.\n- **Motion**: Add a few meaningful animations instead of many weak ones. Prefer page-load staging, hover intent, reveal timing, and state transitions that support the interface.\n- **Backgrounds and details**: Build atmosphere with gradients, textures, patterns, borders, lighting, shadows, or layered surfaces when appropriate. Avoid flat default canvases when the page needs character.\n- **States**: Empty, loading, hover, active, selected, disabled, and error states must feel designed too.\n- **Accessibility**: Keep contrast, focus visibility, keyboard behavior, readable sizing, and reduced-motion considerations intact.\n\n## Existing System Priority\n\nWhen working inside an existing app or design system:\n\n- use existing components before inventing custom markup\n- preserve established spacing scales, tokens, and interaction patterns\n- improve hierarchy, density, affordance, and polish without creating visual drift\n- if shadcn or another component system is present, compose it well instead of fighting it\n\n## Shadcn Mode\n\nWhen the surface is shadcn-based, `fd` handles it directly.\n\n- inspect the installed shadcn primitives, tokens, CSS variables, and common layout patterns first\n- prefer composing existing primitives before creating custom markup\n- strengthen typography, spacing, density, and hierarchy before adding decorative effects\n- preserve component APIs, token discipline, and product coherence\n- use raw custom CSS only when the design needs it and the component layer cannot express it cleanly\n- avoid visual drift, ad hoc spacing, and styling everything from scratch when an existing primitive fits\n\n## New Surface Priority\n\nWhen designing a new page or major new surface:\n\n- pick one strong concept early\n- make the hero section or primary interaction memorable\n- ensure the supporting sections repeat the same design logic\n- avoid generic startup-page structure unless the brief truly calls for it\n\n## Avoid\n\n- generic AI aesthetics\n- purple-on-white gradient defaults\n- overused fonts as a substitute for real design direction\n- interchangeable SaaS hero sections\n- default font stacks as the entire visual idea\n- motion that adds noise rather than clarity\n- decorative clutter without hierarchy\n- breaking an established product language just to look different\n\nDo not converge on the same fonts, palettes, or layout tropes every time.\n\n## Implementation Guidance\n\n- Prefer the repo's existing frontend stack and patterns.\n- Use CSS variables or existing tokens for colors, spacing, radii, shadows, and motion values.\n- Avoid new dependencies unless the user approved them.\n- Keep markup and styling maintainable; expressive does not mean messy.\n- If a design effect is central, implement it properly instead of hinting at it with placeholder code.\n- When delegating to Claude, use a focused prompt block like:\n\n```text\nTask: <what the user wants>\nRepo: <current cwd>\nRelevant paths: <key files or folders>\nConstraints: <design system, stack, responsiveness, no new deps, etc.>\nWhat I need: inspect the code, implement the design changes directly, and run the smallest relevant verification.\n```\n\nIf the surface is shadcn-based, expand `Constraints` with:\n\n```text\nExisting system: shadcn/ui, current tokens, key primitives already in use\nConstraints: keep component APIs coherent, no visual drift, no new deps unless approved\n```\n\n## Verification\n\nBefore finishing:\n\n- check the result on desktop and mobile widths when relevant\n- verify the main interaction, not just the static look\n- run the smallest relevant tests, lint, or build checks\n- if the task is visually sensitive, use browser inspection or screenshots to catch layout regressions\n- if Claude handled the first pass, inspect the resulting diff before finalizing and optionally run a follow-up `claude-design-bridge fd --plan` critique on the finished surface when the change is especially design-sensitive\n\n## Finish\n\nKeep the final response focused on:\n\n- chosen direction\n- what changed visually and structurally\n- verification run\n- remaining rough edges or tradeoffs","tags":["dgk","gpt","dgk-dev","agent-skills","cli","codex","developer-tools","mcp","openai-codex"],"capabilities":["skill","source-dgk-dev","skill-fd","topic-agent-skills","topic-cli","topic-codex","topic-developer-tools","topic-mcp","topic-openai-codex"],"categories":["dgk-gpt"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/dgk-dev/dgk-gpt/fd","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add dgk-dev/dgk-gpt","source_repo":"https://github.com/dgk-dev/dgk-gpt","install_from":"skills.sh"}},"qualityScore":"0.472","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 45 github stars · SKILL.md body (8,601 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-02T00:57:07.603Z","embedding":null,"createdAt":"2026-04-18T22:17:58.281Z","updatedAt":"2026-05-02T00:57:07.603Z","lastSeenAt":"2026-05-02T00:57:07.603Z","tsv":"'/fd':30 'accent':691 'access':785 'action':535 'activ':775 'actual':237 'ad':552,893,925 'add':719,1018 'adjust':467 'aesthet':988 'afford':499,830 'ai':987 'align':701 'alon':99 'alreadi':446,659,1168 'ambigu':558 'anim':723 'anoth':840 'api':898,1174 'app':808 'appl':333 'appli':115,150 'approach':590 'appropri':761 'approv':1080,1183 'aria':260 'ask':33,285,324,462 'assum':228 'asymmetri':705 'atmospher':749 'audienc':432 'audit':218 'author':186 'avail':81 'avoid':640,762,922,972,985,1074 'awkward':254 'back':198 'background':745 'balanc':694 'base':23,860,1156 'behavior':287,791 'better':35 'bias':329,559 'bigger':465 'blind':245 'block':1117 'bold':610 'border':754 'break':1027 'breakpoint':256 'bridg':113,134,208,1252 'brief':556,980 'browser':1222 'brutalist':621 'build':748,1213 'call':982 'calm':350 'cannot':918 'canvas':765 'care':355 'casual':670 'catch':289,1227 'central':1097 'chang':288,395,1142,1262,1278 'charact':770 'check':257,1187,1214 'choic':181 'choos':369 'chosen':1275 'cinemat':620 'clariti':337,511,561,1022 'claud':73,78,111,118,132,175,217,220,1112,1231,1250 'claude-design-bridg':110,131,1249 'claude-first':72 'clean':195,921 'clear':153,213,371,684 'cli':79 'clutter':1024 'code':396,1108,1138 'codebas':401 'codex':96,189,201,226 'codex-n':200 'coher':903,1175 'collis':252 'color':591,671,1067 'commit':575 'common':874 'compet':518 'compon':403,814,841,897,916,1173 'compos':845,879 'composit':527 'concept':484,717,953 'consider':798 'consist':634 'constraint':164,435,1124,1158,1171 'context':377 'contrast':268,593,703,787 'control':498 'converg':1038 'core':367 'craft':383 'creat':696,834,883 'crisp':351 'critiqu':143,1255 'critique-on':142 'crud':509 'css':676,871,907,1061 'current':1164 'custom':817,884,906 'dashboard':494 'data':275,538 'data-heavi':537 'decid':408 'decor':366,553,894,1023 'default':103,318,642,764,994,1008 'deleg':105,172,1110 'deliber':388 'densiti':250,497,707,829,889 'dep':1131,1181 'depend':1076 'design':3,36,50,71,86,112,133,168,185,203,304,311,331,422,450,473,571,648,783,810,911,942,970,1002,1094,1125,1141,1251,1266 'design-first':303 'design-l':647 'design-sensit':1265 'desktop':1191 'detail':603,747 'diff':120,238,1239 'differ':327,1035 'direct':8,178,328,373,572,578,605,864,1003,1143,1276 'disabl':777 'disciplin':680,900 'domin':685 'drift':836,924,1178 'earli':954 'edg':1286 'edit':147 'editori':611 'effect':570,895,1095 'eleg':362 'emphasi':546 'empti':772 'engin':316 'enough':382 'ensur':963 'enterpris':617 'entir':1013 'error':779 'especi':1264 'establish':167,820,1029 'etc':1132 'everi':60,1047 'everyth':930 'execut':637 'exist':278,399,414,800,807,813,880,935,1055,1064,1161 'existing-system':413 'expand':1157 'explicit':32,140,284,323,461 'express':919,1087 'face':428 'fail':214 'fall':197 'fast':502 'favor':678 'fd':1,44,114,135,861,1253 'feel':69,387,782 'fight':850 'filter':273 'final':232,1241,1271 'finish':317,1186,1258,1268 'first':74,107,223,305,392,512,877,1234 'fit':375,937 'fix':121,246 'flat':763 'flow':276 'focus':788,1115,1273 'follow':1247 'follow-up':1246 'font':652,996,1009,1042 'form':506 'friction':516 'frontend':2,49,90,1056 'futurist':626 'generat':391 'generic':641,973,986 'generous':353,710 'goal':55,64,429 'good':604 'grade':17 'gradient':751,993 'group':544 'guidanc':145,1050 'handl':221,862,1232 'heavi':524,539 'hero':489,957,1006 'hierarchi':352,496,655,828,891,1026 'hig':335 'hig-styl':334 'high':360 'hint':1103 'hoc':926 'hous':662 'hover':734,774 'hydrat':291 'idea':440,566,583,1015 'identifi':424 'implement':180,224,379,1049,1098,1139 'import':298,631 'improv':455,827 'includ':20,158 'industri':614 'inform':549 'insid':805 'inspect':117,191,397,865,1136,1223,1236 'instal':867 'instead':92,239,567,579,666,724,848,1101 'intact':799 'integr':123,192,233,262 'intent':70,312,636,735 'interact':279,825,961,1200 'interchang':1004 'interfac':18,478,744 'invent':816 'issu':124,300 'ive':342 'ive-styl':341 'joni':340 'keep':309,786,1082,1172,1269 'key':434,1166 'keyboard':790 'keyboard/focus':258 'kind':476 'land':12,481 'languag':169,407,1031 'layer':758,917 'layout':38,404,595,695,875,1045,1228 'led':649 'legibl':361,550 'light':755 'like':1118 'lint':293,1211 'load':732,773 'local':77 'logic':280,530,971 'look':1034,1205 'louder':62 'luxuri':613 'main':1199 'maintain':299,1086 'major':947 'make':59,67,532,548,955 'mani':726 'market':479 'markup':818,885,1083 'materi':356 'may':307 'mean':1090 'meaning':89,722 'memor':488,962 'messi':1091 'miss':308 'mix':581 'mobil':523,1193 'mobile-heavi':522 'mode':4,53,75,151,853 'modern':348 'moment':490 'motion':266,358,599,718,797,1016,1072 'muddi':693 'must':781 'narrat':486 'nativ':202 'need':769,912,1135 'negat':711 'new':420,938,944,948,1075,1130,1180 'new-surfac':419 'nois':1019 'obvious':536 'one':438,563,577,587,601,728,951 'option':1243 'overflow':248 'overlap':706 'overus':995 'page':13,482,731,768,945,976 'page-load':730 'pair':653 'palett':681,1043 'part':632 'pass':108,225,244,306,393,1235 'path':163,1123 'pattern':753,826,876,1059 'physic':623 'pick':573,950 'placehold':1107 'plan':136,1254 'play':615 'polish':10,43,52,513,832 'post':216 'post-claud':215 'prefer':729,878,1051 'present':844 'preserv':272,452,819,896 'primari':184,431,534,960 'primit':869,881,936,1167 'priorit':495 'prioriti':802,940 'product':16,344,400,445,491,658,902,1030 'production-grad':15 'prompt':173,1116 'proper':1100 'purpl':990 'purple-on-whit':989 'purpos':651 'push':483 'qualiti':40,234 'quiet':612 'radii':1069 'rather':389,1020 'raw':905 'readabl':500,792 'real':1001 'redesign':11 'reduc':265,349,515,796 'reduced-mot':264,795 'reduct':364 'refin':347,416 'regress':269,1229 'relev':162,271,1122,1148,1196,1209 'reli':94 'remain':1284 'rememb':442 'repeat':967 'replac':668 'repo':1053,1121 'request':161 'respons':229,255,1128,1272 'restrain':608 'restraint':339 'result':386,1189,1238 'retro':625 'retro-futurist':624 'reveal':736 'review':235 'rhythm':596,697 'rough':1285 'rout':274 'rule':368,638 'run':126,1145,1206,1244,1283 'saa':1005 'say':29 'scale':700,822 'scan':503 'scratch':932 'screenshot':1225 'section':958,966,1007 'select':776 'semant':673 'sensit':1220,1267 'sentenc':588 'serv':715 'set':507 'shadcn':22,838,852,859,868,1155 'shadcn-bas':21,858,1154 'shadcn/ui':1163 'shadow':756,1070 'sharp':616 'sharpen':664 'shift':466,708 'signatur':602 'simpl':346 'simplifi':526 'singl':102 'size':793 'skill' 'skill-fd' 'small':296 'small-but-import':295 'smallest':1147,1208 'soft':622 'source-dgk-dev' 'space':251,354,529,543,598,699,712,821,888,927,1068 'specialist':87 'spectacl':505 'ssr':290 'stack':569,1010,1057,1127 'stage':733 'startup':975 'startup-pag':974 'state':259,261,739,771,780 'static':1204 'strategi':594 'strengthen':886 'strong':6,449,564,690,952 'structur':977,1281 'style':37,336,343,600,663,929,1085 'substitut':999 'subtl':357 'support':742,965 'surfac':24,421,470,510,645,759,856,939,949,1152,1259 'system':415,451,801,811,842,1126,1162 'tactil':618 'task':157,423,521,1120,1217 'tast':98,319 'test':193,1210 'text':1119,1160 'textur':752 'thesi':585 'think':345 'tighten':314,528 'time':737,1048 'token':402,674,823,870,899,1065,1165 'tone':686 'topic-agent-skills' 'topic-cli' 'topic-codex' 'topic-developer-tools' 'topic-mcp' 'topic-openai-codex' 'toward':332,560 'tradeoff':1288 'transit':740 'treat':82,174 'trope':1046 'truli':981 'truncat':247 'trust':241 'tune':471 'type':292 'typographi':485,542,589,639,887 'ui':9,61,492 'unauthent':211 'unavail':210 'unless':281,320,458,978,1077,1182 'unsaf':154 'use':25,45,100,130,188,541,650,660,672,704,812,904,1060,1113,1170,1221 'user':28,139,160,283,322,427,460,1079 'user-fac':426 'util':619 'ux':42 'valu':1073 'variabl':677,872,1062 'verif':127,1149,1184,1282 'verifi':1197 'view':525,540 'visibl':789 'visual':7,39,177,243,372,406,439,565,584,835,923,1014,1177,1219,1279 'want':141 'weak':582,727 'well':847 'whether':409 'white':992 'width':1194 'within':456 'without':146,833,1025 'work':19,91,204,804 'workflow':104 'worth':441 'wrap':249","prices":[{"id":"d20a100d-5f96-4b82-86f4-e609e43f3cfa","listingId":"3a2187db-3370-4383-9ec7-e8b6bf1ec9b9","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"dgk-dev","category":"dgk-gpt","install_from":"skills.sh"},"createdAt":"2026-04-18T22:17:58.281Z"}],"sources":[{"listingId":"3a2187db-3370-4383-9ec7-e8b6bf1ec9b9","source":"github","sourceId":"dgk-dev/dgk-gpt/fd","sourceUrl":"https://github.com/dgk-dev/dgk-gpt/tree/main/skills/fd","isPrimary":false,"firstSeenAt":"2026-04-18T22:17:58.281Z","lastSeenAt":"2026-05-02T00:57:07.603Z"}],"details":{"listingId":"3a2187db-3370-4383-9ec7-e8b6bf1ec9b9","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"dgk-dev","slug":"fd","github":{"repo":"dgk-dev/dgk-gpt","stars":45,"topics":["agent-skills","cli","codex","developer-tools","mcp","openai-codex"],"license":"mit","html_url":"https://github.com/dgk-dev/dgk-gpt","pushed_at":"2026-03-13T04:37:05Z","description":"Safe Codex CLI setup installer with skills, AGENTS.md, profiles, and MCP defaults","skill_md_sha":"18cf2095b46755a5c757a0b6c450858c35063d76","skill_md_path":"skills/fd/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/dgk-dev/dgk-gpt/tree/main/skills/fd"},"layout":"multi","source":"github","category":"dgk-gpt","frontmatter":{"name":"fd","description":"Frontend design mode for strong visual direction, UI polish, redesigns, landing pages, and production-grade interface work, including shadcn-based surfaces. Use when the user says `/fd` or explicitly asks for better design, styling, layout, visual quality, or UX polish."},"skills_sh_url":"https://skills.sh/dgk-dev/dgk-gpt/fd"},"updatedAt":"2026-05-02T00:57:07.603Z"}}