Menu

#917 by GitHub stars

mouse-lin/finesse-skill

Build and refine high-craft web interfaces: brand sites, product dashboards and workflows, AI workbenches, commerce, H5/mobile screens, and individual components. Route by purpose, preserve project identity, and audit visual quality, accessibility and motion. Supports Apple-inspired / 苹果风 design thr

Claude CodeCodexCursorGitHub CopilotEngineering

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

.codebuddy/skills/finesse-ui/SKILL.md

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

c7a91448baf6 → c7a91448baf6

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → c7a91448baf6

No earlier version was observed for comparison.

Compare on GitHub

.doubao/skills/finesse-ui/SKILL.md

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

c7a91448baf6 → c7a91448baf6

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → c7a91448baf6

No earlier version was observed for comparison.

Compare on GitHub

.trae-cn/skills/finesse-ui/SKILL.md

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

c7a91448baf6 → c7a91448baf6

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → c7a91448baf6

No earlier version was observed for comparison.

Compare on GitHub

.trae/skills/finesse-ui/SKILL.md

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

c7a91448baf6 → c7a91448baf6

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → c7a91448baf6

No earlier version was observed for comparison.

Compare on GitHub

skills/finesse-ui/SKILL.md

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

c7a91448baf6 → c7a91448baf6

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → c7a91448baf6

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit c7a91448baf6e98fecf542915cdb7e3155bddc45

git clone --filter=blob:none --no-checkout https://github.com/mouse-lin/finesse-skill.git .hotskills/mouse-lin-finesse-skill && git -C .hotskills/mouse-lin-finesse-skill checkout --detach c7a91448baf6e98fecf542915cdb7e3155bddc45 # Copy each selected skill directory from .hotskills/mouse-lin-finesse-skill into .claude/skills/<skill-name>/
git clone --filter=blob:none --no-checkout https://github.com/mouse-lin/finesse-skill.git .hotskills/mouse-lin-finesse-skill && git -C .hotskills/mouse-lin-finesse-skill checkout --detach c7a91448baf6e98fecf542915cdb7e3155bddc45 # Copy each selected skill directory from .hotskills/mouse-lin-finesse-skill into .agents/skills/<skill-name>/
git clone --filter=blob:none --no-checkout https://github.com/mouse-lin/finesse-skill.git .hotskills/mouse-lin-finesse-skill && git -C .hotskills/mouse-lin-finesse-skill checkout --detach c7a91448baf6e98fecf542915cdb7e3155bddc45 # Copy each selected skill directory from .hotskills/mouse-lin-finesse-skill into .cursor/skills/<skill-name>/
git clone --filter=blob:none --no-checkout https://github.com/mouse-lin/finesse-skill.git .hotskills/mouse-lin-finesse-skill && git -C .hotskills/mouse-lin-finesse-skill checkout --detach c7a91448baf6e98fecf542915cdb7e3155bddc45 # Copy each selected skill directory from .hotskills/mouse-lin-finesse-skill into .github/skills/<skill-name>/
965GitHub stars
48stars in 7 days
5skills in this repository
4commits in 30 days

Heat

8.0
  • Star growth, last 7 daysAhead of 96% of tracked repositories
  • Star growth, last 24 hoursAhead of 96% of tracked repositories
  • Rank movement, last 7 daysAhead of 92% of tracked repositories
  • Commits, last 30 daysAhead of 67% of tracked repositories
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Aug 2, 2026Nov 6, 2026965

Individual skills in this repository

How it works

finesse-ui

When your agent uses it

Build and refine high-craft web interfaces: brand sites, product dashboards and workflows, AI workbenches, commerce, H5/mobile screens, and individual components. Route by purpose, preserve project identity, and audit visual quality, accessibility and motion. Supports Apple-inspired / 苹果风 design through editorial, app and spatial modes with runnable card studies. Use for landing pages, portfolios, dashboards, admin panels, settings, agent consoles, product pages, checkout, mobile app UI, design-system extraction, redesign, typography, color, layout, animation, drag/swipe/sheet interactions and anti-generic iteration. Includes targeted audit, bolder, quieter, soul, diverge, animate, depth, densify, init and document workflows. Excludes backend-only tasks.

What it loads into context

Frontmatter

230 tokens

Always available to the agent

SKILL.md

19,434 tokens

When the skill is activated

Reference documents

276,636 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. Apple design language (optional)
  2. How to use this skill
  3. Commands
  4. 0. BRAND READ (Before Anything Else)
  5. 1. THE THREE DIALS
  6. 2. PICK A SOUL (Industry → Persona) · brand register
  7. 3. THE PREMIUM SUBSTRATE (Why It Reads as Expensive)
  8. 4. THE HERO ENGINE (finesse's Differentiator) · brand register
  9. 5. PAGE SKELETON — four brand skeletons, not one
  10. 6. THE CHEAPNESS BLACKLIST
  11. 7. PERFORMANCE & ACCESSIBILITY GUARDRAILS
  12. 8. PRE-FLIGHT CHECK
  13. 8.A POST-DELIVERY ITERATION GUIDE
  14. 9. OUT OF SCOPE

Scripts executed separately

  • examples/apple/motion.js
  • examples/apple/studies.js
  • examples/lib/Draggable.min.js
  • examples/lib/Flip.min.js
  • examples/lib/ScrollTrigger.min.js
  • examples/lib/gsap.min.js
  • scripts/detect.mjs
  • scripts/test-apple-detector.mjs
  • ../../../skills/finesse-ui/examples/apple/motion.js
  • ../../../skills/finesse-ui/examples/apple/studies.js
  • ../../../skills/finesse-ui/examples/lib/Draggable.min.js
  • ../../../skills/finesse-ui/examples/lib/Flip.min.js
  • ../../../skills/finesse-ui/examples/lib/ScrollTrigger.min.js
  • ../../../skills/finesse-ui/examples/lib/gsap.min.js
  • ../../../skills/finesse-ui/scripts/detect.mjs
  • ../../../skills/finesse-ui/scripts/test-apple-detector.mjs

Files

  • ../../../.claude-plugin/plugin.jsonasset1,056 bytes
  • SKILL.mdcore77,386 bytes
  • SKILL.mdcore77,386 bytes
  • agents/openai.yamlasset271 bytes
  • examples/EXAMPLES.mddoc22,961 bytes
  • examples/acru-financial-dashboard.htmlasset30,782 bytes
  • examples/aether-cinematic-tech.htmlasset17,175 bytes
  • examples/apple-bento.htmlasset905 bytes
  • examples/apple-contrast.htmlasset911 bytes
  • examples/apple-corners.htmlasset909 bytes
  • examples/apple-gallery.htmlasset909 bytes
  • examples/apple-layout.htmlasset907 bytes
  • examples/apple-overview.htmlasset911 bytes
  • examples/apple-palette.htmlasset909 bytes
  • examples/apple/ASSETS.mddoc1,813 bytes
  • examples/apple/media/product-study-01.jpgasset80,190 bytes
  • examples/apple/media/product-study-02.jpgasset165,148 bytes
  • examples/apple/media/product-study-03.jpgasset439,808 bytes
  • examples/apple/media/product-study-04.jpgasset99,554 bytes
  • examples/apple/media/product-study-05.pngasset365,648 bytes
  • examples/apple/media/product-study-06.pngasset535,602 bytes
  • examples/apple/media/product-study-07.jpgasset93,274 bytes
  • examples/apple/media/product-study-08.jpgasset57,654 bytes
  • examples/apple/media/product-study-09.jpgasset36,846 bytes
  • examples/apple/media/product-study-10.jpgasset585,543 bytes
  • examples/apple/media/product-study-11.jpgasset141,540 bytes
  • examples/apple/motion.jsruns3,351 bytes
  • examples/apple/studies.cssasset21,500 bytes
  • examples/apple/studies.jsruns24,900 bytes
  • examples/buildly-growth-dashboard.htmlasset26,507 bytes
  • examples/caliber-precision-horology.htmlasset33,002 bytes
  • examples/flux-fluid-simulation.htmlasset26,798 bytes
  • examples/h5-brew-mobile-pdp.htmlasset29,321 bytes
  • examples/h5-fern-meal-desk.htmlasset40,741 bytes
  • examples/h5-pawpal-app-shell.htmlasset49,791 bytes
  • examples/h5-peach-daily-desk.htmlasset44,469 bytes
  • examples/h5-sheet-lab.htmlasset59,351 bytes
  • examples/huddle-team-workspace.htmlasset23,627 bytes
  • examples/inkline-publishing-cms.htmlasset24,443 bytes
  • examples/ledgerio-treasury-console.htmlasset27,768 bytes
  • examples/lib/Draggable.min.jsruns35,497 bytes
  • examples/lib/Flip.min.jsruns25,013 bytes
  • examples/lib/ScrollTrigger.min.jsruns44,157 bytes
  • examples/lib/gsap.min.jsruns72,435 bytes
  • examples/morph-variable-type.htmlasset17,126 bytes
  • examples/nodeflux-api-console.htmlasset23,102 bytes
  • examples/nova-brutal-typographic.htmlasset12,391 bytes
  • examples/offscreen-editorial.htmlasset10,409 bytes
  • examples/pawcare-adaptive-health.htmlasset31,967 bytes
  • examples/relay-agent-console.htmlasset47,010 bytes
  • examples/signal-phosphor-terminal.htmlasset18,609 bytes
  • examples/sparkcraft-bauhaus-geometric.htmlasset33,844 bytes
  • examples/stakent-monitoring-dashboard.htmlasset26,325 bytes
  • examples/studio-quiet-luxury.htmlasset22,915 bytes
  • references/3d-effects.mddoc13,758 bytes
  • references/ai-console.mddoc25,716 bytes
  • references/anti-cheap.mddoc19,571 bytes
  • references/apple-design.mddoc7,629 bytes
  • references/apple-patterns.mddoc4,114 bytes
  • references/asset-sourcing.mddoc14,793 bytes
  • references/audit.mddoc8,851 bytes
  • references/chart-crafting.mddoc17,655 bytes
  • references/commerce-ui.mddoc9,295 bytes
  • references/component-scope.mddoc9,959 bytes
  • references/dataviz.mddoc14,490 bytes
  • references/design-dna.mddoc14,931 bytes
  • references/design-model.mddoc4,932 bytes
  • references/divergence.mddoc25,708 bytes
  • references/document.mddoc3,181 bytes
  • references/h5-mobile.mddoc39,999 bytes
  • references/hero-engines.mddoc23,945 bytes
  • references/init.mddoc4,270 bytes
  • references/inspiration-catalog.mddoc11,204 bytes
  • references/interaction-motion.mddoc19,628 bytes
  • references/mobile-floor.mddoc8,899 bytes
  • references/motion.mddoc21,930 bytes
  • references/page-crafting.mddoc34,463 bytes
  • references/plain-words.mddoc8,281 bytes
  • references/preflight.mddoc19,476 bytes
  • references/product-palettes.mddoc24,406 bytes
  • references/product-ui.mddoc28,733 bytes
  • references/redesign-mode.mddoc5,536 bytes
  • references/style-personas.mddoc5,142 bytes
  • references/theming.mddoc6,196 bytes
  • references/workflow-ui.mddoc18,698 bytes
  • scripts/detect.mjsruns23,752 bytes
  • scripts/test-apple-detector.mjsruns2,357 bytes
  • ../../../skills/finesse-ui/SKILL.mddoc77,386 bytes
  • ../../../skills/finesse-ui/agents/openai.yamlasset271 bytes
  • ../../../skills/finesse-ui/examples/EXAMPLES.mddoc22,961 bytes
  • ../../../skills/finesse-ui/examples/acru-financial-dashboard.htmlasset30,782 bytes
  • ../../../skills/finesse-ui/examples/aether-cinematic-tech.htmlasset17,175 bytes
  • ../../../skills/finesse-ui/examples/apple-bento.htmlasset905 bytes
  • ../../../skills/finesse-ui/examples/apple-contrast.htmlasset911 bytes
  • ../../../skills/finesse-ui/examples/apple-corners.htmlasset909 bytes
  • ../../../skills/finesse-ui/examples/apple-gallery.htmlasset909 bytes
  • ../../../skills/finesse-ui/examples/apple-layout.htmlasset907 bytes
  • ../../../skills/finesse-ui/examples/apple-overview.htmlasset911 bytes
  • ../../../skills/finesse-ui/examples/apple-palette.htmlasset909 bytes
  • ../../../skills/finesse-ui/examples/apple/ASSETS.mddoc1,813 bytes
  • ../../../skills/finesse-ui/examples/apple/media/product-study-01.jpgasset80,190 bytes
  • ../../../skills/finesse-ui/examples/apple/media/product-study-02.jpgasset165,148 bytes
  • ../../../skills/finesse-ui/examples/apple/media/product-study-03.jpgasset439,808 bytes
  • ../../../skills/finesse-ui/examples/apple/media/product-study-04.jpgasset99,554 bytes
  • ../../../skills/finesse-ui/examples/apple/media/product-study-05.pngasset365,648 bytes
  • ../../../skills/finesse-ui/examples/apple/media/product-study-06.pngasset535,602 bytes
  • ../../../skills/finesse-ui/examples/apple/media/product-study-07.jpgasset93,274 bytes
  • ../../../skills/finesse-ui/examples/apple/media/product-study-08.jpgasset57,654 bytes
  • ../../../skills/finesse-ui/examples/apple/media/product-study-09.jpgasset36,846 bytes
  • ../../../skills/finesse-ui/examples/apple/media/product-study-10.jpgasset585,543 bytes
  • ../../../skills/finesse-ui/examples/apple/media/product-study-11.jpgasset141,540 bytes
  • ../../../skills/finesse-ui/examples/apple/motion.jsruns3,351 bytes
  • ../../../skills/finesse-ui/examples/apple/studies.cssasset21,500 bytes
  • ../../../skills/finesse-ui/examples/apple/studies.jsruns24,900 bytes
  • ../../../skills/finesse-ui/examples/buildly-growth-dashboard.htmlasset26,507 bytes
  • ../../../skills/finesse-ui/examples/caliber-precision-horology.htmlasset33,002 bytes
  • ../../../skills/finesse-ui/examples/flux-fluid-simulation.htmlasset26,798 bytes
  • ../../../skills/finesse-ui/examples/h5-brew-mobile-pdp.htmlasset29,321 bytes
  • ../../../skills/finesse-ui/examples/h5-fern-meal-desk.htmlasset40,741 bytes
  • ../../../skills/finesse-ui/examples/h5-pawpal-app-shell.htmlasset49,791 bytes
  • ../../../skills/finesse-ui/examples/h5-peach-daily-desk.htmlasset44,469 bytes
  • ../../../skills/finesse-ui/examples/h5-sheet-lab.htmlasset59,351 bytes
  • ../../../skills/finesse-ui/examples/huddle-team-workspace.htmlasset23,627 bytes
  • ../../../skills/finesse-ui/examples/inkline-publishing-cms.htmlasset24,443 bytes
  • ../../../skills/finesse-ui/examples/ledgerio-treasury-console.htmlasset27,768 bytes
  • ../../../skills/finesse-ui/examples/lib/Draggable.min.jsruns35,497 bytes
  • ../../../skills/finesse-ui/examples/lib/Flip.min.jsruns25,013 bytes
  • ../../../skills/finesse-ui/examples/lib/ScrollTrigger.min.jsruns44,157 bytes
  • ../../../skills/finesse-ui/examples/lib/gsap.min.jsruns72,435 bytes
  • ../../../skills/finesse-ui/examples/morph-variable-type.htmlasset17,126 bytes
  • ../../../skills/finesse-ui/examples/nodeflux-api-console.htmlasset23,102 bytes
  • ../../../skills/finesse-ui/examples/nova-brutal-typographic.htmlasset12,391 bytes
  • ../../../skills/finesse-ui/examples/offscreen-editorial.htmlasset10,409 bytes
  • ../../../skills/finesse-ui/examples/pawcare-adaptive-health.htmlasset31,967 bytes
  • ../../../skills/finesse-ui/examples/relay-agent-console.htmlasset47,010 bytes
  • ../../../skills/finesse-ui/examples/signal-phosphor-terminal.htmlasset18,609 bytes
  • ../../../skills/finesse-ui/examples/sparkcraft-bauhaus-geometric.htmlasset33,844 bytes
  • ../../../skills/finesse-ui/examples/stakent-monitoring-dashboard.htmlasset26,325 bytes
  • ../../../skills/finesse-ui/examples/studio-quiet-luxury.htmlasset22,915 bytes
  • ../../../skills/finesse-ui/references/3d-effects.mddoc13,758 bytes
  • ../../../skills/finesse-ui/references/ai-console.mddoc25,716 bytes
  • ../../../skills/finesse-ui/references/anti-cheap.mddoc19,571 bytes
  • ../../../skills/finesse-ui/references/apple-design.mddoc7,629 bytes
  • ../../../skills/finesse-ui/references/apple-patterns.mddoc4,114 bytes
  • ../../../skills/finesse-ui/references/asset-sourcing.mddoc14,793 bytes
  • ../../../skills/finesse-ui/references/audit.mddoc8,851 bytes
  • ../../../skills/finesse-ui/references/chart-crafting.mddoc17,655 bytes
  • ../../../skills/finesse-ui/references/commerce-ui.mddoc9,295 bytes
  • ../../../skills/finesse-ui/references/component-scope.mddoc9,959 bytes
  • ../../../skills/finesse-ui/references/dataviz.mddoc14,490 bytes
  • ../../../skills/finesse-ui/references/design-dna.mddoc14,931 bytes
  • ../../../skills/finesse-ui/references/design-model.mddoc4,932 bytes
  • ../../../skills/finesse-ui/references/divergence.mddoc25,708 bytes
  • ../../../skills/finesse-ui/references/document.mddoc3,181 bytes
  • ../../../skills/finesse-ui/references/h5-mobile.mddoc39,999 bytes
  • ../../../skills/finesse-ui/references/hero-engines.mddoc23,945 bytes
  • ../../../skills/finesse-ui/references/init.mddoc4,270 bytes
  • ../../../skills/finesse-ui/references/inspiration-catalog.mddoc11,204 bytes
  • ../../../skills/finesse-ui/references/interaction-motion.mddoc19,628 bytes
  • ../../../skills/finesse-ui/references/mobile-floor.mddoc8,899 bytes
  • ../../../skills/finesse-ui/references/motion.mddoc21,930 bytes
  • ../../../skills/finesse-ui/references/page-crafting.mddoc34,463 bytes
  • ../../../skills/finesse-ui/references/plain-words.mddoc8,281 bytes
  • ../../../skills/finesse-ui/references/preflight.mddoc19,476 bytes
  • ../../../skills/finesse-ui/references/product-palettes.mddoc24,406 bytes
  • ../../../skills/finesse-ui/references/product-ui.mddoc28,733 bytes
  • ../../../skills/finesse-ui/references/redesign-mode.mddoc5,536 bytes
  • ../../../skills/finesse-ui/references/style-personas.mddoc5,142 bytes
  • ../../../skills/finesse-ui/references/theming.mddoc6,196 bytes
  • ../../../skills/finesse-ui/references/workflow-ui.mddoc18,698 bytes
  • ../../../skills/finesse-ui/scripts/detect.mjsruns23,752 bytes
  • ../../../skills/finesse-ui/scripts/test-apple-detector.mjsruns2,357 bytes
Read SKILL.md

# finesse — Technically Spectacular · Soul-Distinct · Never Cheap

> **finesse builds two kinds of interface and routes by register (§0):**
> - **brand** — design IS the product: landing pages, brand sites, launches, portfolios, hero pages. Optimize for **spectacle + soul + first impression** — a real visual engine, an opinionated personality.
> - **product** — design SERVES the product: dashboards, admin panels, analytics, data tables, app shells, settings. Optimize for **clarity + density + usability** — and still never cheap.
>
> The through-line is identical: **high craft, zero AI-slop.** What applies to **both** is the **universal craft floor** (tinted neutrals, no `#fff`/`#000`, translucent/hairline borders, tinted shadows, contrast floors), the cheapness blacklist (§6), and the pre-flight (§8). What **forks** is the *substrate above that floor* and the middle: **brand** lays the §3 brand substrate (`design-dna.md` — grain, vignette, display type) and reaches for a hero engine (§4); **product** lays its **own** substrate (`product-ui.md` §0 — surfaces, cards, KPI tiles, density) and reaches for a component system + data viz. A dashboard is a **different design language**, not a brand page with charts — it does **not** inherit grain / vignette / giant hero type / dark-default / a hero engine.
>
> **Two more registers sit alongside them, and they work differently from each other.** **commerce** (PDP/PLP/cart/checkout) is a *hybrid* — route it to brand or product by what the specific page is doing. **h5** (phone-only screens: app UI, 活动页, mobile PDP, report H5) is a **container**: it fixes the frame, the safe areas, the thumb hierarchy, and the OS furniture, then wraps one of the other three for the content grammar underneath. A mobile PDP is `h5` + `commerce`; an app dashboard screen is `h5` + `product`. h5 never replaces a content register — it wraps one.
>
> Every rule below is **contextual**. Nothing fires automatically. Read the brief, set the register, then pull only what fits. A skill that produces the same page for every brief has failed.

---
View the complete source on GitHub

Skills included

  • finesse-ui
  • finesse-ui
  • finesse-ui
  • finesse-ui
  • finesse-ui

Repository facts

License
MIT
Created
Jun 22, 2026
Last pushed
Oct 23, 2026
Forks
93
Open issues
2
Project activity
Active

Rank over the last 12 weeks

Now #917 · best #784 · down 75 in 30 days

  1. #927 on Nov 1
  2. #925 on Nov 2
  3. #927 on Nov 3
  4. #926 on Nov 4
  5. #922 on Nov 5
  6. #917 since Nov 6
82 earlier periods
  1. #838 on Aug 2
  2. #832 on Aug 7
  3. #834 on Aug 8
  4. #836 on Aug 9
  5. #871 on Aug 10
  6. #873 on Aug 11
  7. #869 from Aug 12 to Aug 13
  8. #851 on Aug 14
  9. #819 on Aug 15
  10. #844 on Aug 16
  11. #848 on Aug 17
  12. #866 on Aug 18
  13. #858 on Aug 19
  14. #848 on Aug 20
  15. #856 on Aug 21
  16. #800 on Aug 22
  17. #858 on Aug 23
  18. #868 on Aug 24
  19. #880 on Aug 25
  20. #864 on Aug 26
  21. #869 on Aug 27
  22. #905 on Aug 28
  23. #819 on Aug 29
  24. #825 on Aug 30
  25. #866 on Aug 31
  26. #897 on Sep 1
  27. #870 on Sep 2
  28. #875 on Sep 3
  29. #839 on Sep 4
  30. #815 on Sep 5
  31. #851 on Sep 6
  32. #876 on Sep 7
  33. #894 on Sep 8
  34. #881 on Sep 9
  35. #880 on Sep 10
  36. #847 on Sep 11
  37. #844 from Sep 12 to Sep 13
  38. #876 on Sep 14
  39. #866 on Sep 15
  40. #880 on Sep 16
  41. #875 on Sep 17
  42. #853 on Sep 18
  43. #828 on Sep 19
  44. #847 on Sep 20
  45. #861 on Sep 21
  46. #879 on Sep 22
  47. #866 on Sep 23
  48. #830 on Sep 24
  49. #786 on Sep 25
  50. #803 on Sep 26
  51. #821 on Sep 27
  52. #856 on Sep 28
  53. #885 on Sep 29
  54. #850 on Sep 30
  55. #793 on Oct 1
  56. #804 on Oct 2
  57. #784 on Oct 3
  58. #818 on Oct 4
  59. #825 on Oct 5
  60. #820 on Oct 6
  61. #842 on Oct 7
  62. #883 on Oct 8
  63. #846 on Oct 9
  64. #823 on Oct 10
  65. #819 on Oct 11
  66. #837 on Oct 12
  67. #836 on Oct 13
  68. #842 on Oct 14
  69. #824 on Oct 15
  70. #829 on Oct 16
  71. #800 on Oct 17
  72. #788 on Oct 18
  73. #829 on Oct 19
  74. #842 on Oct 20
  75. #850 on Oct 21
  76. #824 on Oct 22
  77. #825 on Oct 23
  78. #787 on Oct 24
  79. #960 on Oct 25
  80. #945 on Oct 28
  81. #932 on Oct 29
  82. #931 from Oct 30 to Oct 31

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 4, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 53 notes
  • .codebuddy/skills/finesse-ui/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • .codebuddy/skills/finesse-ui/examples/apple/studies.css:2 Analysis incomplete: physical or joined line exceeds character limit
  • .codebuddy/skills/finesse-ui/examples/apple/studies.css:1 Analysis incomplete: physical or joined line exceeds character limit
  • .codebuddy/skills/finesse-ui/examples/apple/studies.css:14 Analysis incomplete: physical or joined line exceeds character limit
  • .codebuddy/skills/finesse-ui/examples/apple/studies.css:15 Analysis incomplete: physical or joined line exceeds character limit
  • .codebuddy/skills/finesse-ui/examples/lib/Draggable.min.js:10 Analysis incomplete: physical or joined line exceeds character limit
  • .codebuddy/skills/finesse-ui/examples/lib/Flip.min.js:10 Analysis incomplete: physical or joined line exceeds character limit
  • .codebuddy/skills/finesse-ui/examples/lib/ScrollTrigger.min.js:10 Analysis incomplete: physical or joined line exceeds character limit
  • .codebuddy/skills/finesse-ui/examples/lib/gsap.min.js:10 Analysis incomplete: physical or joined line exceeds character limit
  • skills/finesse-ui/examples/apple/studies.css:2 Analysis incomplete: physical or joined line exceeds character limit
  • skills/finesse-ui/examples/apple/studies.css:1 Analysis incomplete: physical or joined line exceeds character limit
  • skills/finesse-ui/examples/apple/studies.css:14 Analysis incomplete: physical or joined line exceeds character limit
  • skills/finesse-ui/examples/apple/studies.css:15 Analysis incomplete: physical or joined line exceeds character limit
  • skills/finesse-ui/examples/lib/Draggable.min.js:10 Analysis incomplete: physical or joined line exceeds character limit
  • skills/finesse-ui/examples/lib/Flip.min.js:10 Analysis incomplete: physical or joined line exceeds character limit
  • skills/finesse-ui/examples/lib/ScrollTrigger.min.js:10 Analysis incomplete: physical or joined line exceeds character limit
  • skills/finesse-ui/examples/lib/gsap.min.js:10 Analysis incomplete: physical or joined line exceeds character limit
  • .doubao/skills/finesse-ui/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • .doubao/skills/finesse-ui/examples/apple/studies.css:2 Analysis incomplete: physical or joined line exceeds character limit
  • .doubao/skills/finesse-ui/examples/apple/studies.css:1 Analysis incomplete: physical or joined line exceeds character limit
Show all 1,754 signals by file

.claude-plugin/plugin.json

  • Network accessline 1
    {   "$schema": "https://anthropic.com/claude-code/plugin.schema.json",
  • Network accessline 2
    "$schema": "https://anthropic.com/claude-code/plugin.schema.json",
  • Network accessline 7
    "name": "西瓜同学"   },   "homepage": "https://github.com/mouse-lin/finesse-skill",
  • Network accessline 8
    },   "homepage": "https://github.com/mouse-lin/finesse-skill",   "repository": {
  • Network accessline 9
    "homepage": "https://github.com/mouse-lin/finesse-skill",
  • Network accessline 10
    "repository": {     "type": "git",     "url": "git+https://github.com/mouse-lin/finesse-skill.git"
  • Network accessline 11
    "type": "git",     "url": "git+https://github.com/mouse-lin/finesse-skill.git"   },
  • Network accessline 12
    "url": "git+https://github.com/mouse-lin/finesse-skill.git"

.codebuddy/skills/finesse-ui/SKILL.md

  • Dangerous shell operationline 487
    - **Capability-probe pattern (the ship-ready shape):** read the probes once at the top — `const RM = matchMedia('(prefers-reduced-motion:reduce)').matches; const FINE = matchMedia('(hover:hover) and (pointer:fine)').matches;` — then branch

.codebuddy/skills/finesse-ui/examples/aether-cinematic-tech.html

  • Network accessline 8
    /* finesse · register=brand · A=dual-hue-near-black · B=sans+mono · C=full-bleed-engine-hero · D=Three.js+GLSL · E=circuitry&signal    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googlea
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&family=JetBrains+Mono:wght
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 21
    #c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }   .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;     background-image: url("data:image/svg+xml,%3Csvg xmlns='htt
  • Network accessline 22
    .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='
  • Network accessline 23
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 114
    <script type="importmap"> { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 115
    { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 116
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 117
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"

.codebuddy/skills/finesse-ui/examples/apple/ASSETS.md

  • Network accessline 9
    | Bundled file | Public source | | --- | --- | | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 10
    | --- | --- | | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ | | `media/product-study-02.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 11
    | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 12
    | `media/product-study-02.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 13
    | `media/product-study-03.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 14
    | `media/product-study-04.jpg` | https://www.apple.com/ipad-air/ |
  • Network accessline 15
    | `media/product-study-05.png` | https://www.apple.com/ipad-air/ |
  • Network accessline 16
    | `media/product-study-06.png` | https://www.apple.com/ipad-air/ |
  • Network accessline 17
    | `media/product-study-07.jpg` | https://www.apple.com/ipad-air/ |
  • Network accessline 18
    | `media/product-study-08.jpg` | https://www.apple.com/ |
  • Network accessline 19
    | `media/product-study-09.jpg` | https://www.apple.com/macbook-pro/ |
  • Network accessline 20
    | `media/product-study-10.jpg` | https://www.apple.com/macbook-pro/ |
  • Network accessline 21
    | `media/product-study-11.jpg` | https://www.apple.com/apple-watch-series-12/ |

.codebuddy/skills/finesse-ui/examples/apple/motion.js

  • Executable scriptline 1
    Executable file

.codebuddy/skills/finesse-ui/examples/apple/studies.js

  • Executable scriptline 1
    Executable file
  • Possible obfuscationline 29
    const tools={overview:`<a href="apple-bento.html">开始探索 →</a>`,bento:`<button id="guides" aria-pressed="false">显示网格线</button><button id="reflow" aria-pressed="false">切换主卡位置</button><label>间距 <input id="spacing" type="range" min="8" max="24"

.codebuddy/skills/finesse-ui/examples/buildly-growth-dashboard.html

  • Network accessline 23
    radial-gradient(700px 500px at -6% 108%,rgba(255,106,43,.09),transparent 60%)} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.o
  • Network accessline 24
    body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type
  • Network accessline 25
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' h
  • Network accessline 152
    <button class="btn pri"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>Add Data</button>       <div class="icon-btn"><span class="dot">3</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path
  • Network accessline 153
    <div class="icon-btn"><span class="dot">3</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>       <img class="avatar" alt="account" src="data:image/svg+xml,
  • Network accessline 154
    <img class="avatar" alt="account" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff6a2b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-

.codebuddy/skills/finesse-ui/examples/caliber-precision-horology.html

  • Network accessline 8
    /* finesse · register=brand · A=near-black+champagne-metal · B=serif-display+mono-metadata · C=spec-dense-diagram · D=CSS-only-SVG · E=machined-metal    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('htt
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 30
    /* substrate: grain + vignette */   .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter
  • Network accessline 31
    .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fract
  • Network accessline 32
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 418
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches; const SVGNS = 'http://www.w3.org/2000/svg';
  • Network accessline 419
    const SVGNS = 'http://www.w3.org/2000/svg';

.codebuddy/skills/finesse-ui/examples/flux-fluid-simulation.html

  • Network accessline 8
    /* finesse · register=brand · A=violet/cyan-on-deep-ink · B=sans+mono · C=full-page-engine+scrims · D=WebGL-FBO · E=water&fluid    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@1,300;1,400&family=JetBrains+Mono:wght@400;500
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 22
    #c { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; }   .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .038;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
  • Network accessline 23
    .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .038;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type=
  • Network accessline 24
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.codebuddy/skills/finesse-ui/examples/h5-brew-mobile-pdp.html

  • Network accessline 6
    <meta name="theme-color" content="#ffffff"> <title>烘豆日记 · 挂耳咖啡商品详情 — 移动端电商 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>烘豆日记 · 挂耳咖啡商品详情 — 移动端电商 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&family=Noto+Sans+SC:wght@300;400;500;700&family=Bodoni+Moda:wght@400;600&display=swap" rel="stylesheet">
  • Network accessline 446
    scroll-snap / object-fit 的 CSS 一行都不用改。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 447
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 448
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

.codebuddy/skills/finesse-ui/examples/h5-fern-meal-desk.html

  • Network accessline 6
    <meta name="theme-color" content="#EDE7E0"> <title>食记 FERN TABLE · 一日三餐工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>食记 FERN TABLE · 一日三餐工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
  • Dangerous shell operationline 468
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;
  • Network accessline 473
    真实项目里把 PH(n) 换回真实 URL 就是全部迁移工作。菜谱能带走，4MB 的 JPEG 带不走。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 474
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 475
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

.codebuddy/skills/finesse-ui/examples/h5-pawpal-app-shell.html

  • Network accessline 6
    <meta name="theme-color" content="#08090a"> <title>PAWPAL 毛毛档案 · 宠物养护 App — 移动端 UI</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>PAWPAL 毛毛档案 · 宠物养护 App — 移动端 UI</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  • Network accessline 643
    这正是把它做成占位「图片」而不是占位「色块」的原因。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 644
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 645
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

.codebuddy/skills/finesse-ui/examples/h5-peach-daily-desk.html

  • Network accessline 6
    <meta name="theme-color" content="#FFF7F3"> <title>今天也好好的 PEACH DESK · 女生日常工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>今天也好好的 PEACH DESK · 女生日常工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@500;700;800&display=swap" rel="stylesheet">

.codebuddy/skills/finesse-ui/examples/h5-sheet-lab.html

  • Network accessline 6
    <meta name="theme-color" content="#ecebe5"> <title>SHEET LAB · App 弹层交互实验室 — 移动端交互 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>SHEET LAB · App 弹层交互实验室 — 移动端交互 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
  • Dangerous shell operationline 617
    const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;

.codebuddy/skills/finesse-ui/examples/huddle-team-workspace.html

  • Network accessline 174
    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg></div>       <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18
  • Network accessline 175
    <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>       <div class="acct"><img src="data:image/svg+xml,%3Csvg xmln
  • Network accessline 176
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%236c5ce7'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 185
    <div class="right">       <div class="stack">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-se
  • Network accessline 186
    <div class="stack">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-w
  • Network accessline 187
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 188
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 189
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 201
    <span class="tag hi">Due Today</span>           <h4>Intro to React Hooks</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23
  • Network accessline 202
    <h4>Intro to React Hooks</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sa
  • Network accessline 203
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 207
    <span class="tag md">This Week</span>           <h4>CSS Grid Workshop</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb
  • Network accessline 208
    <h4>CSS Grid Workshop</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-
  • Network accessline 209
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 213
    <span class="tag hi">Due Today</span>           <h4>Final Project Review</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23
  • Network accessline 214
    <h4>Final Project Review</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sa
  • Network accessline 215
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 243
    <div class="card reveal">       <div class="card-h"><h3>Weekly Leaderboard</h3><span class="see-all">See All</span></div>       <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%
  • Network accessline 244
    <div class="card-h"><h3>Weekly Leaderboard</h3><span class="see-all">See All</span></div>       <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fi
  • Network accessline 245
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 246
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 247
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 248
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23e0a33a'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 255
    <div class="card reveal">       <div class="card-h"><h3>Cohort Chat</h3><span class="see-all">See All</span></div>       <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3C
  • Network accessline 256
    <div class="card-h"><h3>Cohort Chat</h3><span class="see-all">See All</span></div>       <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill
  • Network accessline 257
    <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight

.codebuddy/skills/finesse-ui/examples/inkline-publishing-cms.html

  • Network accessline 177
    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8 2 2 0 11-2.8 2.8 1.6 1.6 0 00-2.7 1.1 2 2 0 01-4 0 1.6 1.6 0 00-2.6-1.1 2 2 0 11-2.8-2.8A1.6 1.6 0 004 15a2 2 0 010-4 1.6 1.6
  • Network accessline 178
    <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>     <img class="avatar" alt="account" src="data:image/svg+xml,%3
  • Network accessline 179
    <img class="avatar" alt="account" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='3
  • Network accessline 205
    <div class="card profile reveal">         <div class="who">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='
  • Network accessline 206
    <div class="who">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32
  • Network accessline 207
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32' font-weight='700' fill='wh

.codebuddy/skills/finesse-ui/examples/ledgerio-treasury-console.html

  • Network accessline 217
    <div class="search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>Search customers, plans…</div>     <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-
  • Network accessline 218
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>     <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 219
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700
  • Network accessline 266
    <div class="tx-icon"><svg viewBox="0 0 24 24"><path d="M7 8l-4 4 4 4M17 8l4 4-4 4M14 4l-4 16"/></svg></div>           <div><b>Recent Activity</b><span>Across all plans</span></div>           <div class="avatars"><img src="data:image/svg+xml
  • Network accessline 267
    <div><b>Recent Activity</b><span>Across all plans</span></div>           <div class="avatars"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3
  • Network accessline 268
    <div class="avatars"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='
  • Network accessline 270
    <div class="tx-row">           <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 271
    <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vie
  • Network accessline 272
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 276
    <div class="tx-row">           <div class="dot" style="background:var(--lav)"><svg viewBox="0 0 24 24" stroke="var(--lav-ink)" fill="none"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='ht
  • Network accessline 277
    <div class="dot" style="background:var(--lav)"><svg viewBox="0 0 24 24" stroke="var(--lav-ink)" fill="none"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewB
  • Network accessline 278
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b3fd6'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 282
    <div class="tx-row">           <div class="dot" style="background:#f1efe3"><svg viewBox="0 0 24 24" stroke="var(--ink-2)" fill="none"><path d="M17 8l-5-5-5 5M12 3v13"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http:/
  • Network accessline 283
    <div class="dot" style="background:#f1efe3"><svg viewBox="0 0 24 24" stroke="var(--ink-2)" fill="none"><path d="M17 8l-5-5-5 5M12 3v13"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='
  • Network accessline 284
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23e0a33a'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 288
    <div class="tx-row">           <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 289
    <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vie
  • Network accessline 290
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23627eea'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 394
    const Y=v=>H-pad-((v-min)/((max-min)||1))*(H-pad*2);   const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 395
    const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('s
  • Network accessline 396
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

.codebuddy/skills/finesse-ui/examples/lib/Draggable.min.js

  • Network accessline 1
    /*!  * Draggable 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * Draggable 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _assertThisInitialized(e){
  • Possible obfuscationline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _assertThisInitialized(e){

.codebuddy/skills/finesse-ui/examples/lib/Flip.min.js

  • Network accessline 1
    /*!  * Flip 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * Flip 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function p(t){var e=t.ownerDocument
  • Possible obfuscationline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function p(t){var e=t.ownerDocument

.codebuddy/skills/finesse-ui/examples/lib/ScrollTrigger.min.js

  • Network accessline 1
    /*!  * ScrollTrigger 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * ScrollTrigger 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Possible obfuscationline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for

.codebuddy/skills/finesse-ui/examples/lib/gsap.min.js

  • Network accessline 1
    /*!  * GSAP 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * GSAP 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Possible obfuscationline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prot

.codebuddy/skills/finesse-ui/examples/morph-variable-type.html

  • Network accessline 8
    /* finesse · register=brand · A=near-mono-opacity-ladder · B=one-variable-font-all-roles · C=type-specimen · D=CSS-only-variable-font · E=letterform    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('http
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..900,50..150&family=JetBrains+Mono:wght@400;500&display=swap');   *, *::befor
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..900,50..150&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 21
    .mono { font-family:'JetBrains Mono',monospace; }   .grain { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.033;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='2
  • Network accessline 23
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.codebuddy/skills/finesse-ui/examples/nodeflux-api-console.html

  • Network accessline 209
    <div class="brandline"><div class="lab">Postline</div><div class="word">Email Delivery</div></div>     <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></div>     <div class="acct"><i
  • Network accessline 210
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></div>     <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect widt
  • Network accessline 211
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%230d9488'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32' font-wei
  • Network accessline 346
    const Y=v=>H-pad-((v-min)/((max-min)||1))*(H-pad*2);   const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 347
    const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('s
  • Network accessline 348
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

.codebuddy/skills/finesse-ui/examples/nova-brutal-typographic.html

  • Network accessline 8
    /* finesse · register=brand · A=bone/black+one-hot-accent · B=display-as-layout · C=oversized-type · D=GSAP · E=press&ink    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/cs
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital@1&display=swap');   * { margin: 0; padding:
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital@1&display=swap');
  • Network accessline 110
    <section class="hero">     <div class="kick">全球首个<b>纯数字</b>时装周。<br>48 间虚拟时装屋，<br>72 小时不落幕的秀场。</div>     <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" a
  • Network accessline 111
    <div class="kick">全球首个<b>纯数字</b>时装周。<br>48 间虚拟时装屋，<br>72 小时不落幕的秀场。</div>     <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" alt="look" /><div class="cap
  • Network accessline 112
    <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" alt="look" /><div class="cap">LOOK 01 — ATELIER NOVA</div></div>
  • Network accessline 133
    <div class="count" id="rwCount">01 / 06</div>     <div class="track" id="track">       <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><d
  • Network accessline 134
    <div class="track" id="track">       <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><div class="idx">SS26</div><div class="nm"><div clas
  • Network accessline 135
    <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><div class="idx">SS26</div><div class="nm"><div class="a">VELA</div><div class="b">PARIS
  • Network accessline 136
    <div class="look"><img src="https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 02</div><div class="idx">SS26</div><div class="nm"><div class="a">OBSCURA</div><div class="b">BERLIN</
  • Network accessline 137
    <div class="look tall"><img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 03</div><div class="idx">SS26</div><div class="nm"><div class="a">KAIROS</div><div class="b">TOKY
  • Network accessline 138
    <div class="look"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 04</div><div class="idx">SS26</div><div class="nm"><div class="a">MIRAGE</div><div class="b">SEOUL</di
  • Network accessline 139
    <div class="look tall"><img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 05</div><div class="idx">SS26</div><div class="nm"><div class="a">SOLSTICE</div><div class="b">NE
  • Network accessline 140
    <div class="look"><img src="https://images.unsplash.com/photo-1502716119720-b23a93e5fe1b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 06</div><div class="idx">SS26</div><div class="nm"><div class="a">AURUM</div><div class="b">MILAN</div
  • Network accessline 145
    <section class="feature">     <div class="stick">       <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>
  • Network accessline 146
    <div class="stick">       <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>       <div class="ftxt"><h2 class="anton">SEE THE<br>UNSEEN</h2><p>003 — CLO
  • Network accessline 147
    <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>

.codebuddy/skills/finesse-ui/examples/offscreen-editorial.html

  • Network accessline 8
    /* finesse · register=brand · A=cream/ink-light · B=serif-pair · C=ruled-editorial-columns · D=GSAP-scroll-reveal · E=paper&press    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapi
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,500&family=Spectral:ital,wght@0,300;0,400;1,300&family=Inter:wght@40
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,500&family=Spectral:ital,wght@0,300;0,400;1,300&family=Inter:wght@400;500&display=swap');
  • Network accessline 115
    </div>     <div class="right">       <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />
  • Network accessline 116
    <div class="right">       <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />       <div class="feat"><div class="label" style="opacity:.85">封面影像 — COVER STORY</div><h2 class="p
  • Network accessline 117
    <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />
  • Network accessline 142
    <!-- FULL BLEED PLATE -->   <section class="plate">     <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />
  • Network accessline 143
    <section class="plate">     <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />     <div class="meta">
  • Network accessline 144
    <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />

.codebuddy/skills/finesse-ui/examples/pawcare-adaptive-health.html

  • Network accessline 239
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="3.2"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8 2 2 0 11-2.8 2.8 1.6 1.6 0 00-2.7 1.1 2 2 0 01-4 0 1.6 1.6 0 00-2.6-1.1 2 2 0 11-2.8-2.8A1.6 1.6 0
  • Network accessline 240
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg><span class="bad">5</span></div>     <div class="acct"><img src="data:im
  • Network accessline 241
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%231f8a86'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 265
    <div class="card profile-card reveal">         <div class="profile-top">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'
  • Network accessline 266
    <div class="profile-top">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3
  • Network accessline 267
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3E%3Cstop offset='1' stop-color='%23f
  • Network accessline 287
    <div class="center-col">       <div class="hero-img reveal">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop off
  • Network accessline 288
    <div class="hero-img reveal">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/
  • Network accessline 289
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3E%3Cstop offset='1' stop-color='%23f
  • Network accessline 383
    if(fill){     const fd=d+' L '+X(vals.length-1).toFixed(1)+' '+H+' L '+X(0).toFixed(1)+' '+H+' Z';     const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 384
    const fd=d+' L '+X(vals.length-1).toFixed(1)+' '+H+' L '+X(0).toFixed(1)+' '+H+' Z';     const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');     fpath.setAttribute('d',fd);fpath.classList.add('theme-fill');fpath.style
  • Network accessline 385
    const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 388
    if(!reduce){gsap.to(fpath,{opacity:1,duration:.8,delay:.7});}else{fpath.style.opacity=1;}   }   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 389
    }   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.classList.add('theme-stroke');path.style.fill='none';path.style.stroke=color;
  • Network accessline 390
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 405
    const svg=document.getElementById('sparkEcg');   const d='M0 26 L28 26 L36 10 L44 42 L52 26 L70 26 L78 18 L86 34 L94 26 L120 26 L128 10 L136 42 L144 26 L162 26 L170 18 L178 34 L186 26 L240 26';   const path=document.createElementNS('http://
  • Network accessline 406
    const d='M0 26 L28 26 L36 10 L44 42 L52 26 L70 26 L78 18 L86 34 L94 26 L120 26 L128 10 L136 42 L144 26 L162 26 L170 18 L178 34 L186 26 L240 26';   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute
  • Network accessline 407
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

.codebuddy/skills/finesse-ui/examples/relay-agent-console.html

  • Network accessline 5
    <meta name="viewport" content="width=device-width, initial-scale=1"> <title>RELAY 订单异常处理台 · AI 工作台 — Web</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 6
    <title>RELAY 订单异常处理台 · AI 工作台 — Web</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 7
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 9
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
  • Dangerous shell operationline 492
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;
  • Access to secretsline 569
    [Credential-related source omitted]
  • Dangerous shell operationline 732
    el.scrollIntoView({behavior: RM ? 'auto' : 'smooth', block:'center'});
  • Dangerous shell operationline 736
    document.querySelector('.aside-scroll').scrollTo({top:0, behavior: RM ? 'auto' : 'smooth'});
  • Dangerous shell operationline 843
    el.scrollIntoView({behavior: RM ? 'auto' : 'smooth', block:'center'});

.codebuddy/skills/finesse-ui/examples/signal-phosphor-terminal.html

  • Network accessline 8
    /* finesse · register=brand · A=mono+single-acid · B=mono-forward · C=live-data-panel · D=Canvas-2D · E=signal&phosphor    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;700&display=swap');   *, *::before, *::after { margin
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;700&display=swap');
  • Network accessline 28
    #c { position:fixed; inset:0; width:100%; height:100%; z-index:0; }   .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wid
  • Network accessline 29
    .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fract
  • Network accessline 30
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.codebuddy/skills/finesse-ui/examples/sparkcraft-bauhaus-geometric.html

  • Network accessline 8
    /* finesse · register=brand · A=warm-paper+five-primaries · B=geometric-display+humanist-sans · C=geometric-collage · D=CSS-only-geometry · E=building-blocks    * back-filled from EXAMPLES.md; dials not recorded for this build */ @import ur
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap'); *,*::before,*::after{margin:0;
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

.codebuddy/skills/finesse-ui/examples/stakent-monitoring-dashboard.html

  • Network accessline 22
    radial-gradient(700px 500px at 100% 60%,rgba(167,139,250,.10),transparent 60%)} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.
  • Network accessline 23
    body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type
  • Network accessline 24
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' he
  • Network accessline 180
    <main class="main">     <div class="topbar">       <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y
  • Network accessline 181
    <div class="topbar">       <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y='52' font-family='sans-
  • Network accessline 182
    <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-

.codebuddy/skills/finesse-ui/examples/studio-quiet-luxury.html

  • Network accessline 8
    /* finesse · register=brand · A=off-white+forest-sage · B=one-family-100-900 · C=max-whitespace-split · D=CSS-only-dual-mask · E=concrete&light    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://f
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;600;800;900&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=s
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;600;800;900&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 20
    两个面只要够不一样就成立，不必是照片。真实项目里换回真实 URL 即可。        注意 SVG 里的片段引用必须写 %23（CSS 里 # 会被当成 URL fragment）。 */     --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><line
  • Network accessline 21
    注意 SVG 里的片段引用必须写 %23（CSS 里 # 会被当成 URL fragment）。 */     --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1
  • Network accessline 22
    --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='hsl(38 9%25 78%25)'/><sto
  • Network accessline 23
    --ph-reveal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='h' x1='0' y1='0' x2='.4' y2='1'><stop offset='0' stop-color='hsl(45 16%25 95%25)'/
  • Network accessline 24
    --ph-p1:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700' preserveAspectRatio='none'><rect width='900' height='700' fill='hsl(36 10%25 70%25)'/><rect x='0' y='430' width='900' height='270' fill='hsl(
  • Network accessline 25
    --ph-p2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' preserveAspectRatio='none'><rect width='700' height='700' fill='hsl(90 7%25 64%25)'/><path d='M0 470 L700 410 L700 700 L0 700Z' fill='hsl(96
  • Network accessline 26
    --ph-p3:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' preserveAspectRatio='none'><rect width='700' height='700' fill='hsl(40 12%25 82%25)'/><rect x='0' y='500' width='700' height='200' fill='hsl(

.codebuddy/skills/finesse-ui/references/3d-effects.md

  • Network accessline 151
    <script type="importmap"> { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 152
    { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 153
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 154
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"

.codebuddy/skills/finesse-ui/references/apple-design.md

  • Network accessline 78
    - [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/): platform guidance; consult the relevant platform when implementing native behavior.
  • Network accessline 79
    - [Designing Fluid Interfaces, WWDC 2018](https://developer.apple.com/videos/play/wwdc2018/803/): interaction continuity and direct manipulation.
  • Network accessline 80
    - [Community apple-design reference](https://github.com/attentiondotnet/emilkowalski_skills/blob/main/skills/apple-design/SKILL.md): secondary synthesis; principles were adapted, not copied wholesale or treated as official parameter tables.
  • Network accessline 81
    - [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill): Bento and spatial style taxonomy. Its decorative Liquid Glass recipe is not a universal Apple requirement.

.codebuddy/skills/finesse-ui/references/asset-sourcing.md

  • Access to secretsline 50
    [Credential-related source omitted]
  • Network accessline 79
    - **Don't imply endorsement.** A stock photo of a person is not that person endorsing the (often fictional) brand — fine for mood/lifestyle imagery, not fine as a fake "customer testimonial" headshot presented as real. - **Real alt text**,
  • Network accessline 81
    - **If hotlinking turns out to be slow or unreliable once actually wired in** — a request hangs, takes far longer than a normal image fetch (tens of seconds instead of near-instant), or times out during your own verification pass — **stop a

.codebuddy/skills/finesse-ui/references/chart-crafting.md

  • Network accessline 140
    > **First: make GSAP available.** Every `gsap.*` call below assumes GSAP is loaded — a `gsap.*` call with no GSAP on the page just silently does nothing (and your chart never reveals). Pick one, before your script runs: > - **Self-host (pre
  • Network accessline 141
    > - **Self-host (preferred — offline-safe, zero remote dependency, version frozen):** put `gsap.min.js` (+ `ScrollTrigger.min.js` only if you use scroll) in `./lib/`, then `<script src="lib/gsap.min.js"></script>`. This is what the bundled
  • Network accessline 142
    > - **CDN (only if the project allows remote deps):** `<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>`.
  • Dangerous shell operationline 162
    const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;

.codebuddy/skills/finesse-ui/references/design-dna.md

  • Network accessline 71
    position: fixed; inset: 0; z-index: 1; pointer-events: none;   opacity: .032;   /* .025–.05. Dark pages lower, busy pages higher */   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20
  • Network accessline 72
    opacity: .032;   /* .025–.05. Dark pages lower, busy pages higher */   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' bas
  • Network accessline 73
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 204
    <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 205
    <style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');   *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  • Network accessline 206
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 210
    body { background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }   body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:
  • Network accessline 211
    body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.032;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurb
  • Network accessline 212
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.codebuddy/skills/finesse-ui/references/h5-mobile.md

  • Dangerous shell operationline 460
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;

.codebuddy/skills/finesse-ui/references/motion.md

  • Dangerous shell operationline 31
    const RM   = matchMedia('(prefers-reduced-motion: reduce)').matches;
  • Network accessline 152
    content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;   opacity: .04; mix-blend-mode: overlay; background-size: 180px 180px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfi
  • Network accessline 153
    opacity: .04; mix-blend-mode: overlay; background-size: 180px 180px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctav
  • Network accessline 154
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' heig

.codebuddy/skills/finesse-ui/scripts/detect.mjs

  • Executable scriptline 1
    #!/usr/bin/env node

.codebuddy/skills/finesse-ui/scripts/test-apple-detector.mjs

  • Executable scriptline 1
    Executable file

.doubao/skills/finesse-ui/SKILL.md

  • Dangerous shell operationline 485
    - **Capability-probe pattern (the ship-ready shape):** read the probes once at the top — `const RM = matchMedia('(prefers-reduced-motion:reduce)').matches; const FINE = matchMedia('(hover:hover) and (pointer:fine)').matches;` — then branch

.doubao/skills/finesse-ui/examples/aether-cinematic-tech.html

  • Network accessline 8
    /* finesse · register=brand · A=dual-hue-near-black · B=sans+mono · C=full-bleed-engine-hero · D=Three.js+GLSL · E=circuitry&signal    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googlea
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&family=JetBrains+Mono:wght
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 21
    #c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }   .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;     background-image: url("data:image/svg+xml,%3Csvg xmlns='htt
  • Network accessline 22
    .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='
  • Network accessline 23
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 114
    <script type="importmap"> { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 115
    { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 116
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 117
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"

.doubao/skills/finesse-ui/examples/apple/ASSETS.md

  • Network accessline 9
    | Bundled file | Public source | | --- | --- | | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 10
    | --- | --- | | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ | | `media/product-study-02.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 11
    | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 12
    | `media/product-study-02.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 13
    | `media/product-study-03.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 14
    | `media/product-study-04.jpg` | https://www.apple.com/ipad-air/ |
  • Network accessline 15
    | `media/product-study-05.png` | https://www.apple.com/ipad-air/ |
  • Network accessline 16
    | `media/product-study-06.png` | https://www.apple.com/ipad-air/ |
  • Network accessline 17
    | `media/product-study-07.jpg` | https://www.apple.com/ipad-air/ |
  • Network accessline 18
    | `media/product-study-08.jpg` | https://www.apple.com/ |
  • Network accessline 19
    | `media/product-study-09.jpg` | https://www.apple.com/macbook-pro/ |
  • Network accessline 20
    | `media/product-study-10.jpg` | https://www.apple.com/macbook-pro/ |
  • Network accessline 21
    | `media/product-study-11.jpg` | https://www.apple.com/apple-watch-series-12/ |

.doubao/skills/finesse-ui/examples/apple/motion.js

  • Executable scriptline 1
    Executable file

.doubao/skills/finesse-ui/examples/apple/studies.js

  • Executable scriptline 1
    Executable file
  • Possible obfuscationline 29
    const tools={overview:`<a href="apple-bento.html">开始探索 →</a>`,bento:`<button id="guides" aria-pressed="false">显示网格线</button><button id="reflow" aria-pressed="false">切换主卡位置</button><label>间距 <input id="spacing" type="range" min="8" max="24"

.doubao/skills/finesse-ui/examples/buildly-growth-dashboard.html

  • Network accessline 23
    radial-gradient(700px 500px at -6% 108%,rgba(255,106,43,.09),transparent 60%)} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.o
  • Network accessline 24
    body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type
  • Network accessline 25
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' h
  • Network accessline 152
    <button class="btn pri"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>Add Data</button>       <div class="icon-btn"><span class="dot">3</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path
  • Network accessline 153
    <div class="icon-btn"><span class="dot">3</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>       <img class="avatar" alt="account" src="data:image/svg+xml,
  • Network accessline 154
    <img class="avatar" alt="account" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff6a2b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-

.doubao/skills/finesse-ui/examples/caliber-precision-horology.html

  • Network accessline 8
    /* finesse · register=brand · A=near-black+champagne-metal · B=serif-display+mono-metadata · C=spec-dense-diagram · D=CSS-only-SVG · E=machined-metal    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('htt
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 30
    /* substrate: grain + vignette */   .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter
  • Network accessline 31
    .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fract
  • Network accessline 32
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 418
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches; const SVGNS = 'http://www.w3.org/2000/svg';
  • Network accessline 419
    const SVGNS = 'http://www.w3.org/2000/svg';

.doubao/skills/finesse-ui/examples/flux-fluid-simulation.html

  • Network accessline 8
    /* finesse · register=brand · A=violet/cyan-on-deep-ink · B=sans+mono · C=full-page-engine+scrims · D=WebGL-FBO · E=water&fluid    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@1,300;1,400&family=JetBrains+Mono:wght@400;500
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 22
    #c { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; }   .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .038;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
  • Network accessline 23
    .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .038;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type=
  • Network accessline 24
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.doubao/skills/finesse-ui/examples/h5-brew-mobile-pdp.html

  • Network accessline 6
    <meta name="theme-color" content="#ffffff"> <title>烘豆日记 · 挂耳咖啡商品详情 — 移动端电商 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>烘豆日记 · 挂耳咖啡商品详情 — 移动端电商 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&family=Noto+Sans+SC:wght@300;400;500;700&family=Bodoni+Moda:wght@400;600&display=swap" rel="stylesheet">
  • Network accessline 446
    scroll-snap / object-fit 的 CSS 一行都不用改。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 447
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 448
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

.doubao/skills/finesse-ui/examples/h5-fern-meal-desk.html

  • Network accessline 6
    <meta name="theme-color" content="#EDE7E0"> <title>食记 FERN TABLE · 一日三餐工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>食记 FERN TABLE · 一日三餐工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
  • Dangerous shell operationline 468
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;
  • Network accessline 473
    真实项目里把 PH(n) 换回真实 URL 就是全部迁移工作。菜谱能带走，4MB 的 JPEG 带不走。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 474
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 475
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

.doubao/skills/finesse-ui/examples/h5-pawpal-app-shell.html

  • Network accessline 6
    <meta name="theme-color" content="#08090a"> <title>PAWPAL 毛毛档案 · 宠物养护 App — 移动端 UI</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>PAWPAL 毛毛档案 · 宠物养护 App — 移动端 UI</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  • Network accessline 643
    这正是把它做成占位「图片」而不是占位「色块」的原因。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 644
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 645
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

.doubao/skills/finesse-ui/examples/h5-peach-daily-desk.html

  • Network accessline 6
    <meta name="theme-color" content="#FFF7F3"> <title>今天也好好的 PEACH DESK · 女生日常工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>今天也好好的 PEACH DESK · 女生日常工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@500;700;800&display=swap" rel="stylesheet">

.doubao/skills/finesse-ui/examples/h5-sheet-lab.html

  • Network accessline 6
    <meta name="theme-color" content="#ecebe5"> <title>SHEET LAB · App 弹层交互实验室 — 移动端交互 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>SHEET LAB · App 弹层交互实验室 — 移动端交互 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
  • Dangerous shell operationline 617
    const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;

.doubao/skills/finesse-ui/examples/huddle-team-workspace.html

  • Network accessline 174
    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg></div>       <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18
  • Network accessline 175
    <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>       <div class="acct"><img src="data:image/svg+xml,%3Csvg xmln
  • Network accessline 176
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%236c5ce7'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 185
    <div class="right">       <div class="stack">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-se
  • Network accessline 186
    <div class="stack">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-w
  • Network accessline 187
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 188
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 189
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 201
    <span class="tag hi">Due Today</span>           <h4>Intro to React Hooks</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23
  • Network accessline 202
    <h4>Intro to React Hooks</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sa
  • Network accessline 203
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 207
    <span class="tag md">This Week</span>           <h4>CSS Grid Workshop</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb
  • Network accessline 208
    <h4>CSS Grid Workshop</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-
  • Network accessline 209
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 213
    <span class="tag hi">Due Today</span>           <h4>Final Project Review</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23
  • Network accessline 214
    <h4>Final Project Review</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sa
  • Network accessline 215
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 243
    <div class="card reveal">       <div class="card-h"><h3>Weekly Leaderboard</h3><span class="see-all">See All</span></div>       <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%
  • Network accessline 244
    <div class="card-h"><h3>Weekly Leaderboard</h3><span class="see-all">See All</span></div>       <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fi
  • Network accessline 245
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 246
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 247
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 248
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23e0a33a'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 255
    <div class="card reveal">       <div class="card-h"><h3>Cohort Chat</h3><span class="see-all">See All</span></div>       <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3C
  • Network accessline 256
    <div class="card-h"><h3>Cohort Chat</h3><span class="see-all">See All</span></div>       <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill
  • Network accessline 257
    <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight

.doubao/skills/finesse-ui/examples/inkline-publishing-cms.html

  • Network accessline 177
    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8 2 2 0 11-2.8 2.8 1.6 1.6 0 00-2.7 1.1 2 2 0 01-4 0 1.6 1.6 0 00-2.6-1.1 2 2 0 11-2.8-2.8A1.6 1.6 0 004 15a2 2 0 010-4 1.6 1.6
  • Network accessline 178
    <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>     <img class="avatar" alt="account" src="data:image/svg+xml,%3
  • Network accessline 179
    <img class="avatar" alt="account" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='3
  • Network accessline 205
    <div class="card profile reveal">         <div class="who">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='
  • Network accessline 206
    <div class="who">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32
  • Network accessline 207
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32' font-weight='700' fill='wh

.doubao/skills/finesse-ui/examples/ledgerio-treasury-console.html

  • Network accessline 217
    <div class="search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>Search customers, plans…</div>     <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-
  • Network accessline 218
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>     <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 219
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700
  • Network accessline 266
    <div class="tx-icon"><svg viewBox="0 0 24 24"><path d="M7 8l-4 4 4 4M17 8l4 4-4 4M14 4l-4 16"/></svg></div>           <div><b>Recent Activity</b><span>Across all plans</span></div>           <div class="avatars"><img src="data:image/svg+xml
  • Network accessline 267
    <div><b>Recent Activity</b><span>Across all plans</span></div>           <div class="avatars"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3
  • Network accessline 268
    <div class="avatars"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='
  • Network accessline 270
    <div class="tx-row">           <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 271
    <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vie
  • Network accessline 272
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 276
    <div class="tx-row">           <div class="dot" style="background:var(--lav)"><svg viewBox="0 0 24 24" stroke="var(--lav-ink)" fill="none"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='ht
  • Network accessline 277
    <div class="dot" style="background:var(--lav)"><svg viewBox="0 0 24 24" stroke="var(--lav-ink)" fill="none"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewB
  • Network accessline 278
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b3fd6'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 282
    <div class="tx-row">           <div class="dot" style="background:#f1efe3"><svg viewBox="0 0 24 24" stroke="var(--ink-2)" fill="none"><path d="M17 8l-5-5-5 5M12 3v13"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http:/
  • Network accessline 283
    <div class="dot" style="background:#f1efe3"><svg viewBox="0 0 24 24" stroke="var(--ink-2)" fill="none"><path d="M17 8l-5-5-5 5M12 3v13"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='
  • Network accessline 284
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23e0a33a'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 288
    <div class="tx-row">           <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 289
    <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vie
  • Network accessline 290
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23627eea'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 394
    const Y=v=>H-pad-((v-min)/((max-min)||1))*(H-pad*2);   const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 395
    const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('s
  • Network accessline 396
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

.doubao/skills/finesse-ui/examples/lib/Draggable.min.js

  • Network accessline 1
    /*!  * Draggable 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * Draggable 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _assertThisInitialized(e){
  • Possible obfuscationline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _assertThisInitialized(e){

.doubao/skills/finesse-ui/examples/lib/Flip.min.js

  • Network accessline 1
    /*!  * Flip 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * Flip 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function p(t){var e=t.ownerDocument
  • Possible obfuscationline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function p(t){var e=t.ownerDocument

.doubao/skills/finesse-ui/examples/lib/ScrollTrigger.min.js

  • Network accessline 1
    /*!  * ScrollTrigger 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * ScrollTrigger 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Possible obfuscationline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for

.doubao/skills/finesse-ui/examples/lib/gsap.min.js

  • Network accessline 1
    /*!  * GSAP 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * GSAP 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Possible obfuscationline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prot

.doubao/skills/finesse-ui/examples/morph-variable-type.html

  • Network accessline 8
    /* finesse · register=brand · A=near-mono-opacity-ladder · B=one-variable-font-all-roles · C=type-specimen · D=CSS-only-variable-font · E=letterform    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('http
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..900,50..150&family=JetBrains+Mono:wght@400;500&display=swap');   *, *::befor
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..900,50..150&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 21
    .mono { font-family:'JetBrains Mono',monospace; }   .grain { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.033;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='2
  • Network accessline 23
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.doubao/skills/finesse-ui/examples/nodeflux-api-console.html

  • Network accessline 209
    <div class="brandline"><div class="lab">Postline</div><div class="word">Email Delivery</div></div>     <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></div>     <div class="acct"><i
  • Network accessline 210
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></div>     <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect widt
  • Network accessline 211
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%230d9488'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32' font-wei
  • Network accessline 346
    const Y=v=>H-pad-((v-min)/((max-min)||1))*(H-pad*2);   const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 347
    const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('s
  • Network accessline 348
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

.doubao/skills/finesse-ui/examples/nova-brutal-typographic.html

  • Network accessline 8
    /* finesse · register=brand · A=bone/black+one-hot-accent · B=display-as-layout · C=oversized-type · D=GSAP · E=press&ink    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/cs
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital@1&display=swap');   * { margin: 0; padding:
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital@1&display=swap');
  • Network accessline 110
    <section class="hero">     <div class="kick">全球首个<b>纯数字</b>时装周。<br>48 间虚拟时装屋，<br>72 小时不落幕的秀场。</div>     <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" a
  • Network accessline 111
    <div class="kick">全球首个<b>纯数字</b>时装周。<br>48 间虚拟时装屋，<br>72 小时不落幕的秀场。</div>     <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" alt="look" /><div class="cap
  • Network accessline 112
    <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" alt="look" /><div class="cap">LOOK 01 — ATELIER NOVA</div></div>
  • Network accessline 133
    <div class="count" id="rwCount">01 / 06</div>     <div class="track" id="track">       <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><d
  • Network accessline 134
    <div class="track" id="track">       <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><div class="idx">SS26</div><div class="nm"><div clas
  • Network accessline 135
    <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><div class="idx">SS26</div><div class="nm"><div class="a">VELA</div><div class="b">PARIS
  • Network accessline 136
    <div class="look"><img src="https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 02</div><div class="idx">SS26</div><div class="nm"><div class="a">OBSCURA</div><div class="b">BERLIN</
  • Network accessline 137
    <div class="look tall"><img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 03</div><div class="idx">SS26</div><div class="nm"><div class="a">KAIROS</div><div class="b">TOKY
  • Network accessline 138
    <div class="look"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 04</div><div class="idx">SS26</div><div class="nm"><div class="a">MIRAGE</div><div class="b">SEOUL</di
  • Network accessline 139
    <div class="look tall"><img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 05</div><div class="idx">SS26</div><div class="nm"><div class="a">SOLSTICE</div><div class="b">NE
  • Network accessline 140
    <div class="look"><img src="https://images.unsplash.com/photo-1502716119720-b23a93e5fe1b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 06</div><div class="idx">SS26</div><div class="nm"><div class="a">AURUM</div><div class="b">MILAN</div
  • Network accessline 145
    <section class="feature">     <div class="stick">       <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>
  • Network accessline 146
    <div class="stick">       <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>       <div class="ftxt"><h2 class="anton">SEE THE<br>UNSEEN</h2><p>003 — CLO
  • Network accessline 147
    <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>

.doubao/skills/finesse-ui/examples/offscreen-editorial.html

  • Network accessline 8
    /* finesse · register=brand · A=cream/ink-light · B=serif-pair · C=ruled-editorial-columns · D=GSAP-scroll-reveal · E=paper&press    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapi
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,500&family=Spectral:ital,wght@0,300;0,400;1,300&family=Inter:wght@40
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,500&family=Spectral:ital,wght@0,300;0,400;1,300&family=Inter:wght@400;500&display=swap');
  • Network accessline 115
    </div>     <div class="right">       <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />
  • Network accessline 116
    <div class="right">       <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />       <div class="feat"><div class="label" style="opacity:.85">封面影像 — COVER STORY</div><h2 class="p
  • Network accessline 117
    <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />
  • Network accessline 142
    <!-- FULL BLEED PLATE -->   <section class="plate">     <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />
  • Network accessline 143
    <section class="plate">     <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />     <div class="meta">
  • Network accessline 144
    <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />

.doubao/skills/finesse-ui/examples/pawcare-adaptive-health.html

  • Network accessline 239
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="3.2"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8 2 2 0 11-2.8 2.8 1.6 1.6 0 00-2.7 1.1 2 2 0 01-4 0 1.6 1.6 0 00-2.6-1.1 2 2 0 11-2.8-2.8A1.6 1.6 0
  • Network accessline 240
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg><span class="bad">5</span></div>     <div class="acct"><img src="data:im
  • Network accessline 241
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%231f8a86'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 265
    <div class="card profile-card reveal">         <div class="profile-top">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'
  • Network accessline 266
    <div class="profile-top">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3
  • Network accessline 267
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3E%3Cstop offset='1' stop-color='%23f
  • Network accessline 287
    <div class="center-col">       <div class="hero-img reveal">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop off
  • Network accessline 288
    <div class="hero-img reveal">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/
  • Network accessline 289
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3E%3Cstop offset='1' stop-color='%23f
  • Network accessline 383
    if(fill){     const fd=d+' L '+X(vals.length-1).toFixed(1)+' '+H+' L '+X(0).toFixed(1)+' '+H+' Z';     const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 384
    const fd=d+' L '+X(vals.length-1).toFixed(1)+' '+H+' L '+X(0).toFixed(1)+' '+H+' Z';     const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');     fpath.setAttribute('d',fd);fpath.classList.add('theme-fill');fpath.style
  • Network accessline 385
    const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 388
    if(!reduce){gsap.to(fpath,{opacity:1,duration:.8,delay:.7});}else{fpath.style.opacity=1;}   }   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 389
    }   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.classList.add('theme-stroke');path.style.fill='none';path.style.stroke=color;
  • Network accessline 390
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 405
    const svg=document.getElementById('sparkEcg');   const d='M0 26 L28 26 L36 10 L44 42 L52 26 L70 26 L78 18 L86 34 L94 26 L120 26 L128 10 L136 42 L144 26 L162 26 L170 18 L178 34 L186 26 L240 26';   const path=document.createElementNS('http://
  • Network accessline 406
    const d='M0 26 L28 26 L36 10 L44 42 L52 26 L70 26 L78 18 L86 34 L94 26 L120 26 L128 10 L136 42 L144 26 L162 26 L170 18 L178 34 L186 26 L240 26';   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute
  • Network accessline 407
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

.doubao/skills/finesse-ui/examples/relay-agent-console.html

  • Network accessline 5
    <meta name="viewport" content="width=device-width, initial-scale=1"> <title>RELAY 订单异常处理台 · AI 工作台 — Web</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 6
    <title>RELAY 订单异常处理台 · AI 工作台 — Web</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 7
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 9
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
  • Dangerous shell operationline 492
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;
  • Access to secretsline 569
    [Credential-related source omitted]
  • Dangerous shell operationline 732
    el.scrollIntoView({behavior: RM ? 'auto' : 'smooth', block:'center'});
  • Dangerous shell operationline 736
    document.querySelector('.aside-scroll').scrollTo({top:0, behavior: RM ? 'auto' : 'smooth'});
  • Dangerous shell operationline 843
    el.scrollIntoView({behavior: RM ? 'auto' : 'smooth', block:'center'});

.doubao/skills/finesse-ui/examples/signal-phosphor-terminal.html

  • Network accessline 8
    /* finesse · register=brand · A=mono+single-acid · B=mono-forward · C=live-data-panel · D=Canvas-2D · E=signal&phosphor    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;700&display=swap');   *, *::before, *::after { margin
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;700&display=swap');
  • Network accessline 28
    #c { position:fixed; inset:0; width:100%; height:100%; z-index:0; }   .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wid
  • Network accessline 29
    .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fract
  • Network accessline 30
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.doubao/skills/finesse-ui/examples/sparkcraft-bauhaus-geometric.html

  • Network accessline 8
    /* finesse · register=brand · A=warm-paper+five-primaries · B=geometric-display+humanist-sans · C=geometric-collage · D=CSS-only-geometry · E=building-blocks    * back-filled from EXAMPLES.md; dials not recorded for this build */ @import ur
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap'); *,*::before,*::after{margin:0;
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

.doubao/skills/finesse-ui/examples/stakent-monitoring-dashboard.html

  • Network accessline 22
    radial-gradient(700px 500px at 100% 60%,rgba(167,139,250,.10),transparent 60%)} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.
  • Network accessline 23
    body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type
  • Network accessline 24
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' he
  • Network accessline 180
    <main class="main">     <div class="topbar">       <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y
  • Network accessline 181
    <div class="topbar">       <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y='52' font-family='sans-
  • Network accessline 182
    <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-

.doubao/skills/finesse-ui/examples/studio-quiet-luxury.html

  • Network accessline 8
    /* finesse · register=brand · A=off-white+forest-sage · B=one-family-100-900 · C=max-whitespace-split · D=CSS-only-dual-mask · E=concrete&light    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://f
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;600;800;900&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=s
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;600;800;900&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 20
    两个面只要够不一样就成立，不必是照片。真实项目里换回真实 URL 即可。        注意 SVG 里的片段引用必须写 %23（CSS 里 # 会被当成 URL fragment）。 */     --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><line
  • Network accessline 21
    注意 SVG 里的片段引用必须写 %23（CSS 里 # 会被当成 URL fragment）。 */     --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1
  • Network accessline 22
    --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='hsl(38 9%25 78%25)'/><sto
  • Network accessline 23
    --ph-reveal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='h' x1='0' y1='0' x2='.4' y2='1'><stop offset='0' stop-color='hsl(45 16%25 95%25)'/
  • Network accessline 24
    --ph-p1:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700' preserveAspectRatio='none'><rect width='900' height='700' fill='hsl(36 10%25 70%25)'/><rect x='0' y='430' width='900' height='270' fill='hsl(
  • Network accessline 25
    --ph-p2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' preserveAspectRatio='none'><rect width='700' height='700' fill='hsl(90 7%25 64%25)'/><path d='M0 470 L700 410 L700 700 L0 700Z' fill='hsl(96
  • Network accessline 26
    --ph-p3:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' preserveAspectRatio='none'><rect width='700' height='700' fill='hsl(40 12%25 82%25)'/><rect x='0' y='500' width='700' height='200' fill='hsl(

.doubao/skills/finesse-ui/references/3d-effects.md

  • Network accessline 151
    <script type="importmap"> { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 152
    { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 153
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 154
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"

.doubao/skills/finesse-ui/references/apple-design.md

  • Network accessline 78
    - [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/): platform guidance; consult the relevant platform when implementing native behavior.
  • Network accessline 79
    - [Designing Fluid Interfaces, WWDC 2018](https://developer.apple.com/videos/play/wwdc2018/803/): interaction continuity and direct manipulation.
  • Network accessline 80
    - [Community apple-design reference](https://github.com/attentiondotnet/emilkowalski_skills/blob/main/skills/apple-design/SKILL.md): secondary synthesis; principles were adapted, not copied wholesale or treated as official parameter tables.
  • Network accessline 81
    - [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill): Bento and spatial style taxonomy. Its decorative Liquid Glass recipe is not a universal Apple requirement.

.doubao/skills/finesse-ui/references/asset-sourcing.md

  • Access to secretsline 50
    [Credential-related source omitted]
  • Network accessline 79
    - **Don't imply endorsement.** A stock photo of a person is not that person endorsing the (often fictional) brand — fine for mood/lifestyle imagery, not fine as a fake "customer testimonial" headshot presented as real. - **Real alt text**,
  • Network accessline 81
    - **If hotlinking turns out to be slow or unreliable once actually wired in** — a request hangs, takes far longer than a normal image fetch (tens of seconds instead of near-instant), or times out during your own verification pass — **stop a

.doubao/skills/finesse-ui/references/chart-crafting.md

  • Network accessline 140
    > **First: make GSAP available.** Every `gsap.*` call below assumes GSAP is loaded — a `gsap.*` call with no GSAP on the page just silently does nothing (and your chart never reveals). Pick one, before your script runs: > - **Self-host (pre
  • Network accessline 141
    > - **Self-host (preferred — offline-safe, zero remote dependency, version frozen):** put `gsap.min.js` (+ `ScrollTrigger.min.js` only if you use scroll) in `./lib/`, then `<script src="lib/gsap.min.js"></script>`. This is what the bundled
  • Network accessline 142
    > - **CDN (only if the project allows remote deps):** `<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>`.
  • Dangerous shell operationline 162
    const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;

.doubao/skills/finesse-ui/references/design-dna.md

  • Network accessline 71
    position: fixed; inset: 0; z-index: 1; pointer-events: none;   opacity: .032;   /* .025–.05. Dark pages lower, busy pages higher */   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20
  • Network accessline 72
    opacity: .032;   /* .025–.05. Dark pages lower, busy pages higher */   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' bas
  • Network accessline 73
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 204
    <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 205
    <style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');   *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  • Network accessline 206
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 210
    body { background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }   body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:
  • Network accessline 211
    body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.032;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurb
  • Network accessline 212
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.doubao/skills/finesse-ui/references/h5-mobile.md

  • Dangerous shell operationline 460
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;

.doubao/skills/finesse-ui/references/motion.md

  • Dangerous shell operationline 31
    const RM   = matchMedia('(prefers-reduced-motion: reduce)').matches;
  • Network accessline 152
    content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;   opacity: .04; mix-blend-mode: overlay; background-size: 180px 180px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfi
  • Network accessline 153
    opacity: .04; mix-blend-mode: overlay; background-size: 180px 180px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctav
  • Network accessline 154
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' heig

.doubao/skills/finesse-ui/scripts/detect.mjs

  • Executable scriptline 1
    #!/usr/bin/env node

.doubao/skills/finesse-ui/scripts/test-apple-detector.mjs

  • Executable scriptline 1
    Executable file

.trae-cn/skills/finesse-ui/SKILL.md

  • Dangerous shell operationline 487
    - **Capability-probe pattern (the ship-ready shape):** read the probes once at the top — `const RM = matchMedia('(prefers-reduced-motion:reduce)').matches; const FINE = matchMedia('(hover:hover) and (pointer:fine)').matches;` — then branch

.trae-cn/skills/finesse-ui/examples/aether-cinematic-tech.html

  • Network accessline 8
    /* finesse · register=brand · A=dual-hue-near-black · B=sans+mono · C=full-bleed-engine-hero · D=Three.js+GLSL · E=circuitry&signal    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googlea
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&family=JetBrains+Mono:wght
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 21
    #c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }   .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;     background-image: url("data:image/svg+xml,%3Csvg xmlns='htt
  • Network accessline 22
    .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='
  • Network accessline 23
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 114
    <script type="importmap"> { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 115
    { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 116
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 117
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"

.trae-cn/skills/finesse-ui/examples/apple/ASSETS.md

  • Network accessline 9
    | Bundled file | Public source | | --- | --- | | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 10
    | --- | --- | | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ | | `media/product-study-02.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 11
    | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 12
    | `media/product-study-02.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 13
    | `media/product-study-03.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 14
    | `media/product-study-04.jpg` | https://www.apple.com/ipad-air/ |
  • Network accessline 15
    | `media/product-study-05.png` | https://www.apple.com/ipad-air/ |
  • Network accessline 16
    | `media/product-study-06.png` | https://www.apple.com/ipad-air/ |
  • Network accessline 17
    | `media/product-study-07.jpg` | https://www.apple.com/ipad-air/ |
  • Network accessline 18
    | `media/product-study-08.jpg` | https://www.apple.com/ |
  • Network accessline 19
    | `media/product-study-09.jpg` | https://www.apple.com/macbook-pro/ |
  • Network accessline 20
    | `media/product-study-10.jpg` | https://www.apple.com/macbook-pro/ |
  • Network accessline 21
    | `media/product-study-11.jpg` | https://www.apple.com/apple-watch-series-12/ |

.trae-cn/skills/finesse-ui/examples/apple/motion.js

  • Executable scriptline 1
    Executable file

.trae-cn/skills/finesse-ui/examples/apple/studies.js

  • Executable scriptline 1
    Executable file
  • Possible obfuscationline 29
    const tools={overview:`<a href="apple-bento.html">开始探索 →</a>`,bento:`<button id="guides" aria-pressed="false">显示网格线</button><button id="reflow" aria-pressed="false">切换主卡位置</button><label>间距 <input id="spacing" type="range" min="8" max="24"

.trae-cn/skills/finesse-ui/examples/buildly-growth-dashboard.html

  • Network accessline 23
    radial-gradient(700px 500px at -6% 108%,rgba(255,106,43,.09),transparent 60%)} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.o
  • Network accessline 24
    body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type
  • Network accessline 25
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' h
  • Network accessline 152
    <button class="btn pri"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>Add Data</button>       <div class="icon-btn"><span class="dot">3</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path
  • Network accessline 153
    <div class="icon-btn"><span class="dot">3</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>       <img class="avatar" alt="account" src="data:image/svg+xml,
  • Network accessline 154
    <img class="avatar" alt="account" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff6a2b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-

.trae-cn/skills/finesse-ui/examples/caliber-precision-horology.html

  • Network accessline 8
    /* finesse · register=brand · A=near-black+champagne-metal · B=serif-display+mono-metadata · C=spec-dense-diagram · D=CSS-only-SVG · E=machined-metal    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('htt
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 30
    /* substrate: grain + vignette */   .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter
  • Network accessline 31
    .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fract
  • Network accessline 32
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 418
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches; const SVGNS = 'http://www.w3.org/2000/svg';
  • Network accessline 419
    const SVGNS = 'http://www.w3.org/2000/svg';

.trae-cn/skills/finesse-ui/examples/flux-fluid-simulation.html

  • Network accessline 8
    /* finesse · register=brand · A=violet/cyan-on-deep-ink · B=sans+mono · C=full-page-engine+scrims · D=WebGL-FBO · E=water&fluid    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@1,300;1,400&family=JetBrains+Mono:wght@400;500
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 22
    #c { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; }   .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .038;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
  • Network accessline 23
    .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .038;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type=
  • Network accessline 24
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.trae-cn/skills/finesse-ui/examples/h5-brew-mobile-pdp.html

  • Network accessline 6
    <meta name="theme-color" content="#ffffff"> <title>烘豆日记 · 挂耳咖啡商品详情 — 移动端电商 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>烘豆日记 · 挂耳咖啡商品详情 — 移动端电商 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&family=Noto+Sans+SC:wght@300;400;500;700&family=Bodoni+Moda:wght@400;600&display=swap" rel="stylesheet">
  • Network accessline 446
    scroll-snap / object-fit 的 CSS 一行都不用改。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 447
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 448
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

.trae-cn/skills/finesse-ui/examples/h5-fern-meal-desk.html

  • Network accessline 6
    <meta name="theme-color" content="#EDE7E0"> <title>食记 FERN TABLE · 一日三餐工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>食记 FERN TABLE · 一日三餐工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
  • Dangerous shell operationline 468
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;
  • Network accessline 473
    真实项目里把 PH(n) 换回真实 URL 就是全部迁移工作。菜谱能带走，4MB 的 JPEG 带不走。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 474
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 475
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

.trae-cn/skills/finesse-ui/examples/h5-pawpal-app-shell.html

  • Network accessline 6
    <meta name="theme-color" content="#08090a"> <title>PAWPAL 毛毛档案 · 宠物养护 App — 移动端 UI</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>PAWPAL 毛毛档案 · 宠物养护 App — 移动端 UI</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  • Network accessline 643
    这正是把它做成占位「图片」而不是占位「色块」的原因。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 644
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 645
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

.trae-cn/skills/finesse-ui/examples/h5-peach-daily-desk.html

  • Network accessline 6
    <meta name="theme-color" content="#FFF7F3"> <title>今天也好好的 PEACH DESK · 女生日常工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>今天也好好的 PEACH DESK · 女生日常工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@500;700;800&display=swap" rel="stylesheet">

.trae-cn/skills/finesse-ui/examples/h5-sheet-lab.html

  • Network accessline 6
    <meta name="theme-color" content="#ecebe5"> <title>SHEET LAB · App 弹层交互实验室 — 移动端交互 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>SHEET LAB · App 弹层交互实验室 — 移动端交互 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
  • Dangerous shell operationline 617
    const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;

.trae-cn/skills/finesse-ui/examples/huddle-team-workspace.html

  • Network accessline 174
    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg></div>       <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18
  • Network accessline 175
    <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>       <div class="acct"><img src="data:image/svg+xml,%3Csvg xmln
  • Network accessline 176
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%236c5ce7'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 185
    <div class="right">       <div class="stack">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-se
  • Network accessline 186
    <div class="stack">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-w
  • Network accessline 187
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 188
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 189
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 201
    <span class="tag hi">Due Today</span>           <h4>Intro to React Hooks</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23
  • Network accessline 202
    <h4>Intro to React Hooks</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sa
  • Network accessline 203
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 207
    <span class="tag md">This Week</span>           <h4>CSS Grid Workshop</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb
  • Network accessline 208
    <h4>CSS Grid Workshop</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-
  • Network accessline 209
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 213
    <span class="tag hi">Due Today</span>           <h4>Final Project Review</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23
  • Network accessline 214
    <h4>Final Project Review</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sa
  • Network accessline 215
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 243
    <div class="card reveal">       <div class="card-h"><h3>Weekly Leaderboard</h3><span class="see-all">See All</span></div>       <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%
  • Network accessline 244
    <div class="card-h"><h3>Weekly Leaderboard</h3><span class="see-all">See All</span></div>       <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fi
  • Network accessline 245
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 246
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 247
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 248
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23e0a33a'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 255
    <div class="card reveal">       <div class="card-h"><h3>Cohort Chat</h3><span class="see-all">See All</span></div>       <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3C
  • Network accessline 256
    <div class="card-h"><h3>Cohort Chat</h3><span class="see-all">See All</span></div>       <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill
  • Network accessline 257
    <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight

.trae-cn/skills/finesse-ui/examples/inkline-publishing-cms.html

  • Network accessline 177
    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8 2 2 0 11-2.8 2.8 1.6 1.6 0 00-2.7 1.1 2 2 0 01-4 0 1.6 1.6 0 00-2.6-1.1 2 2 0 11-2.8-2.8A1.6 1.6 0 004 15a2 2 0 010-4 1.6 1.6
  • Network accessline 178
    <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>     <img class="avatar" alt="account" src="data:image/svg+xml,%3
  • Network accessline 179
    <img class="avatar" alt="account" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='3
  • Network accessline 205
    <div class="card profile reveal">         <div class="who">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='
  • Network accessline 206
    <div class="who">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32
  • Network accessline 207
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32' font-weight='700' fill='wh

.trae-cn/skills/finesse-ui/examples/ledgerio-treasury-console.html

  • Network accessline 217
    <div class="search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>Search customers, plans…</div>     <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-
  • Network accessline 218
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>     <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 219
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700
  • Network accessline 266
    <div class="tx-icon"><svg viewBox="0 0 24 24"><path d="M7 8l-4 4 4 4M17 8l4 4-4 4M14 4l-4 16"/></svg></div>           <div><b>Recent Activity</b><span>Across all plans</span></div>           <div class="avatars"><img src="data:image/svg+xml
  • Network accessline 267
    <div><b>Recent Activity</b><span>Across all plans</span></div>           <div class="avatars"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3
  • Network accessline 268
    <div class="avatars"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='
  • Network accessline 270
    <div class="tx-row">           <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 271
    <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vie
  • Network accessline 272
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 276
    <div class="tx-row">           <div class="dot" style="background:var(--lav)"><svg viewBox="0 0 24 24" stroke="var(--lav-ink)" fill="none"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='ht
  • Network accessline 277
    <div class="dot" style="background:var(--lav)"><svg viewBox="0 0 24 24" stroke="var(--lav-ink)" fill="none"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewB
  • Network accessline 278
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b3fd6'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 282
    <div class="tx-row">           <div class="dot" style="background:#f1efe3"><svg viewBox="0 0 24 24" stroke="var(--ink-2)" fill="none"><path d="M17 8l-5-5-5 5M12 3v13"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http:/
  • Network accessline 283
    <div class="dot" style="background:#f1efe3"><svg viewBox="0 0 24 24" stroke="var(--ink-2)" fill="none"><path d="M17 8l-5-5-5 5M12 3v13"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='
  • Network accessline 284
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23e0a33a'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 288
    <div class="tx-row">           <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 289
    <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vie
  • Network accessline 290
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23627eea'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 394
    const Y=v=>H-pad-((v-min)/((max-min)||1))*(H-pad*2);   const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 395
    const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('s
  • Network accessline 396
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

.trae-cn/skills/finesse-ui/examples/lib/Draggable.min.js

  • Network accessline 1
    /*!  * Draggable 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * Draggable 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _assertThisInitialized(e){
  • Possible obfuscationline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _assertThisInitialized(e){

.trae-cn/skills/finesse-ui/examples/lib/Flip.min.js

  • Network accessline 1
    /*!  * Flip 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * Flip 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function p(t){var e=t.ownerDocument
  • Possible obfuscationline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function p(t){var e=t.ownerDocument

.trae-cn/skills/finesse-ui/examples/lib/ScrollTrigger.min.js

  • Network accessline 1
    /*!  * ScrollTrigger 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * ScrollTrigger 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Possible obfuscationline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for

.trae-cn/skills/finesse-ui/examples/lib/gsap.min.js

  • Network accessline 1
    /*!  * GSAP 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * GSAP 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Possible obfuscationline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prot

.trae-cn/skills/finesse-ui/examples/morph-variable-type.html

  • Network accessline 8
    /* finesse · register=brand · A=near-mono-opacity-ladder · B=one-variable-font-all-roles · C=type-specimen · D=CSS-only-variable-font · E=letterform    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('http
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..900,50..150&family=JetBrains+Mono:wght@400;500&display=swap');   *, *::befor
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..900,50..150&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 21
    .mono { font-family:'JetBrains Mono',monospace; }   .grain { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.033;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='2
  • Network accessline 23
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.trae-cn/skills/finesse-ui/examples/nodeflux-api-console.html

  • Network accessline 209
    <div class="brandline"><div class="lab">Postline</div><div class="word">Email Delivery</div></div>     <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></div>     <div class="acct"><i
  • Network accessline 210
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></div>     <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect widt
  • Network accessline 211
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%230d9488'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32' font-wei
  • Network accessline 346
    const Y=v=>H-pad-((v-min)/((max-min)||1))*(H-pad*2);   const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 347
    const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('s
  • Network accessline 348
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

.trae-cn/skills/finesse-ui/examples/nova-brutal-typographic.html

  • Network accessline 8
    /* finesse · register=brand · A=bone/black+one-hot-accent · B=display-as-layout · C=oversized-type · D=GSAP · E=press&ink    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/cs
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital@1&display=swap');   * { margin: 0; padding:
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital@1&display=swap');
  • Network accessline 110
    <section class="hero">     <div class="kick">全球首个<b>纯数字</b>时装周。<br>48 间虚拟时装屋，<br>72 小时不落幕的秀场。</div>     <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" a
  • Network accessline 111
    <div class="kick">全球首个<b>纯数字</b>时装周。<br>48 间虚拟时装屋，<br>72 小时不落幕的秀场。</div>     <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" alt="look" /><div class="cap
  • Network accessline 112
    <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" alt="look" /><div class="cap">LOOK 01 — ATELIER NOVA</div></div>
  • Network accessline 133
    <div class="count" id="rwCount">01 / 06</div>     <div class="track" id="track">       <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><d
  • Network accessline 134
    <div class="track" id="track">       <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><div class="idx">SS26</div><div class="nm"><div clas
  • Network accessline 135
    <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><div class="idx">SS26</div><div class="nm"><div class="a">VELA</div><div class="b">PARIS
  • Network accessline 136
    <div class="look"><img src="https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 02</div><div class="idx">SS26</div><div class="nm"><div class="a">OBSCURA</div><div class="b">BERLIN</
  • Network accessline 137
    <div class="look tall"><img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 03</div><div class="idx">SS26</div><div class="nm"><div class="a">KAIROS</div><div class="b">TOKY
  • Network accessline 138
    <div class="look"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 04</div><div class="idx">SS26</div><div class="nm"><div class="a">MIRAGE</div><div class="b">SEOUL</di
  • Network accessline 139
    <div class="look tall"><img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 05</div><div class="idx">SS26</div><div class="nm"><div class="a">SOLSTICE</div><div class="b">NE
  • Network accessline 140
    <div class="look"><img src="https://images.unsplash.com/photo-1502716119720-b23a93e5fe1b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 06</div><div class="idx">SS26</div><div class="nm"><div class="a">AURUM</div><div class="b">MILAN</div
  • Network accessline 145
    <section class="feature">     <div class="stick">       <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>
  • Network accessline 146
    <div class="stick">       <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>       <div class="ftxt"><h2 class="anton">SEE THE<br>UNSEEN</h2><p>003 — CLO
  • Network accessline 147
    <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>

.trae-cn/skills/finesse-ui/examples/offscreen-editorial.html

  • Network accessline 8
    /* finesse · register=brand · A=cream/ink-light · B=serif-pair · C=ruled-editorial-columns · D=GSAP-scroll-reveal · E=paper&press    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapi
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,500&family=Spectral:ital,wght@0,300;0,400;1,300&family=Inter:wght@40
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,500&family=Spectral:ital,wght@0,300;0,400;1,300&family=Inter:wght@400;500&display=swap');
  • Network accessline 115
    </div>     <div class="right">       <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />
  • Network accessline 116
    <div class="right">       <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />       <div class="feat"><div class="label" style="opacity:.85">封面影像 — COVER STORY</div><h2 class="p
  • Network accessline 117
    <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />
  • Network accessline 142
    <!-- FULL BLEED PLATE -->   <section class="plate">     <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />
  • Network accessline 143
    <section class="plate">     <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />     <div class="meta">
  • Network accessline 144
    <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />

.trae-cn/skills/finesse-ui/examples/pawcare-adaptive-health.html

  • Network accessline 239
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="3.2"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8 2 2 0 11-2.8 2.8 1.6 1.6 0 00-2.7 1.1 2 2 0 01-4 0 1.6 1.6 0 00-2.6-1.1 2 2 0 11-2.8-2.8A1.6 1.6 0
  • Network accessline 240
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg><span class="bad">5</span></div>     <div class="acct"><img src="data:im
  • Network accessline 241
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%231f8a86'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 265
    <div class="card profile-card reveal">         <div class="profile-top">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'
  • Network accessline 266
    <div class="profile-top">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3
  • Network accessline 267
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3E%3Cstop offset='1' stop-color='%23f
  • Network accessline 287
    <div class="center-col">       <div class="hero-img reveal">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop off
  • Network accessline 288
    <div class="hero-img reveal">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/
  • Network accessline 289
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3E%3Cstop offset='1' stop-color='%23f
  • Network accessline 383
    if(fill){     const fd=d+' L '+X(vals.length-1).toFixed(1)+' '+H+' L '+X(0).toFixed(1)+' '+H+' Z';     const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 384
    const fd=d+' L '+X(vals.length-1).toFixed(1)+' '+H+' L '+X(0).toFixed(1)+' '+H+' Z';     const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');     fpath.setAttribute('d',fd);fpath.classList.add('theme-fill');fpath.style
  • Network accessline 385
    const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 388
    if(!reduce){gsap.to(fpath,{opacity:1,duration:.8,delay:.7});}else{fpath.style.opacity=1;}   }   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 389
    }   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.classList.add('theme-stroke');path.style.fill='none';path.style.stroke=color;
  • Network accessline 390
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 405
    const svg=document.getElementById('sparkEcg');   const d='M0 26 L28 26 L36 10 L44 42 L52 26 L70 26 L78 18 L86 34 L94 26 L120 26 L128 10 L136 42 L144 26 L162 26 L170 18 L178 34 L186 26 L240 26';   const path=document.createElementNS('http://
  • Network accessline 406
    const d='M0 26 L28 26 L36 10 L44 42 L52 26 L70 26 L78 18 L86 34 L94 26 L120 26 L128 10 L136 42 L144 26 L162 26 L170 18 L178 34 L186 26 L240 26';   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute
  • Network accessline 407
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

.trae-cn/skills/finesse-ui/examples/relay-agent-console.html

  • Network accessline 5
    <meta name="viewport" content="width=device-width, initial-scale=1"> <title>RELAY 订单异常处理台 · AI 工作台 — Web</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 6
    <title>RELAY 订单异常处理台 · AI 工作台 — Web</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 7
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 9
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
  • Dangerous shell operationline 492
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;
  • Access to secretsline 569
    [Credential-related source omitted]
  • Dangerous shell operationline 732
    el.scrollIntoView({behavior: RM ? 'auto' : 'smooth', block:'center'});
  • Dangerous shell operationline 736
    document.querySelector('.aside-scroll').scrollTo({top:0, behavior: RM ? 'auto' : 'smooth'});
  • Dangerous shell operationline 843
    el.scrollIntoView({behavior: RM ? 'auto' : 'smooth', block:'center'});

.trae-cn/skills/finesse-ui/examples/signal-phosphor-terminal.html

  • Network accessline 8
    /* finesse · register=brand · A=mono+single-acid · B=mono-forward · C=live-data-panel · D=Canvas-2D · E=signal&phosphor    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;700&display=swap');   *, *::before, *::after { margin
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;700&display=swap');
  • Network accessline 28
    #c { position:fixed; inset:0; width:100%; height:100%; z-index:0; }   .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wid
  • Network accessline 29
    .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fract
  • Network accessline 30
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.trae-cn/skills/finesse-ui/examples/sparkcraft-bauhaus-geometric.html

  • Network accessline 8
    /* finesse · register=brand · A=warm-paper+five-primaries · B=geometric-display+humanist-sans · C=geometric-collage · D=CSS-only-geometry · E=building-blocks    * back-filled from EXAMPLES.md; dials not recorded for this build */ @import ur
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap'); *,*::before,*::after{margin:0;
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

.trae-cn/skills/finesse-ui/examples/stakent-monitoring-dashboard.html

  • Network accessline 22
    radial-gradient(700px 500px at 100% 60%,rgba(167,139,250,.10),transparent 60%)} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.
  • Network accessline 23
    body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type
  • Network accessline 24
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' he
  • Network accessline 180
    <main class="main">     <div class="topbar">       <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y
  • Network accessline 181
    <div class="topbar">       <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y='52' font-family='sans-
  • Network accessline 182
    <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-

.trae-cn/skills/finesse-ui/examples/studio-quiet-luxury.html

  • Network accessline 8
    /* finesse · register=brand · A=off-white+forest-sage · B=one-family-100-900 · C=max-whitespace-split · D=CSS-only-dual-mask · E=concrete&light    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://f
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;600;800;900&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=s
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;600;800;900&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 20
    两个面只要够不一样就成立，不必是照片。真实项目里换回真实 URL 即可。        注意 SVG 里的片段引用必须写 %23（CSS 里 # 会被当成 URL fragment）。 */     --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><line
  • Network accessline 21
    注意 SVG 里的片段引用必须写 %23（CSS 里 # 会被当成 URL fragment）。 */     --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1
  • Network accessline 22
    --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='hsl(38 9%25 78%25)'/><sto
  • Network accessline 23
    --ph-reveal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='h' x1='0' y1='0' x2='.4' y2='1'><stop offset='0' stop-color='hsl(45 16%25 95%25)'/
  • Network accessline 24
    --ph-p1:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700' preserveAspectRatio='none'><rect width='900' height='700' fill='hsl(36 10%25 70%25)'/><rect x='0' y='430' width='900' height='270' fill='hsl(
  • Network accessline 25
    --ph-p2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' preserveAspectRatio='none'><rect width='700' height='700' fill='hsl(90 7%25 64%25)'/><path d='M0 470 L700 410 L700 700 L0 700Z' fill='hsl(96
  • Network accessline 26
    --ph-p3:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' preserveAspectRatio='none'><rect width='700' height='700' fill='hsl(40 12%25 82%25)'/><rect x='0' y='500' width='700' height='200' fill='hsl(

.trae-cn/skills/finesse-ui/references/3d-effects.md

  • Network accessline 151
    <script type="importmap"> { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 152
    { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 153
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 154
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"

.trae-cn/skills/finesse-ui/references/apple-design.md

  • Network accessline 78
    - [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/): platform guidance; consult the relevant platform when implementing native behavior.
  • Network accessline 79
    - [Designing Fluid Interfaces, WWDC 2018](https://developer.apple.com/videos/play/wwdc2018/803/): interaction continuity and direct manipulation.
  • Network accessline 80
    - [Community apple-design reference](https://github.com/attentiondotnet/emilkowalski_skills/blob/main/skills/apple-design/SKILL.md): secondary synthesis; principles were adapted, not copied wholesale or treated as official parameter tables.
  • Network accessline 81
    - [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill): Bento and spatial style taxonomy. Its decorative Liquid Glass recipe is not a universal Apple requirement.

.trae-cn/skills/finesse-ui/references/asset-sourcing.md

  • Access to secretsline 50
    [Credential-related source omitted]
  • Network accessline 79
    - **Don't imply endorsement.** A stock photo of a person is not that person endorsing the (often fictional) brand — fine for mood/lifestyle imagery, not fine as a fake "customer testimonial" headshot presented as real. - **Real alt text**,
  • Network accessline 81
    - **If hotlinking turns out to be slow or unreliable once actually wired in** — a request hangs, takes far longer than a normal image fetch (tens of seconds instead of near-instant), or times out during your own verification pass — **stop a

.trae-cn/skills/finesse-ui/references/chart-crafting.md

  • Network accessline 140
    > **First: make GSAP available.** Every `gsap.*` call below assumes GSAP is loaded — a `gsap.*` call with no GSAP on the page just silently does nothing (and your chart never reveals). Pick one, before your script runs: > - **Self-host (pre
  • Network accessline 141
    > - **Self-host (preferred — offline-safe, zero remote dependency, version frozen):** put `gsap.min.js` (+ `ScrollTrigger.min.js` only if you use scroll) in `./lib/`, then `<script src="lib/gsap.min.js"></script>`. This is what the bundled
  • Network accessline 142
    > - **CDN (only if the project allows remote deps):** `<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>`.
  • Dangerous shell operationline 162
    const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;

.trae-cn/skills/finesse-ui/references/design-dna.md

  • Network accessline 71
    position: fixed; inset: 0; z-index: 1; pointer-events: none;   opacity: .032;   /* .025–.05. Dark pages lower, busy pages higher */   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20
  • Network accessline 72
    opacity: .032;   /* .025–.05. Dark pages lower, busy pages higher */   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' bas
  • Network accessline 73
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 204
    <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 205
    <style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');   *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  • Network accessline 206
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 210
    body { background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }   body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:
  • Network accessline 211
    body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.032;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurb
  • Network accessline 212
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.trae-cn/skills/finesse-ui/references/h5-mobile.md

  • Dangerous shell operationline 460
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;

.trae-cn/skills/finesse-ui/references/motion.md

  • Dangerous shell operationline 31
    const RM   = matchMedia('(prefers-reduced-motion: reduce)').matches;
  • Network accessline 152
    content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;   opacity: .04; mix-blend-mode: overlay; background-size: 180px 180px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfi
  • Network accessline 153
    opacity: .04; mix-blend-mode: overlay; background-size: 180px 180px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctav
  • Network accessline 154
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' heig

.trae-cn/skills/finesse-ui/scripts/detect.mjs

  • Executable scriptline 1
    #!/usr/bin/env node

.trae-cn/skills/finesse-ui/scripts/test-apple-detector.mjs

  • Executable scriptline 1
    Executable file

.trae/skills/finesse-ui/SKILL.md

  • Dangerous shell operationline 487
    - **Capability-probe pattern (the ship-ready shape):** read the probes once at the top — `const RM = matchMedia('(prefers-reduced-motion:reduce)').matches; const FINE = matchMedia('(hover:hover) and (pointer:fine)').matches;` — then branch

.trae/skills/finesse-ui/examples/aether-cinematic-tech.html

  • Network accessline 8
    /* finesse · register=brand · A=dual-hue-near-black · B=sans+mono · C=full-bleed-engine-hero · D=Three.js+GLSL · E=circuitry&signal    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googlea
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&family=JetBrains+Mono:wght
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 21
    #c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }   .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;     background-image: url("data:image/svg+xml,%3Csvg xmlns='htt
  • Network accessline 22
    .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='
  • Network accessline 23
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 114
    <script type="importmap"> { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 115
    { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 116
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 117
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"

.trae/skills/finesse-ui/examples/apple/ASSETS.md

  • Network accessline 9
    | Bundled file | Public source | | --- | --- | | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 10
    | --- | --- | | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ | | `media/product-study-02.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 11
    | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 12
    | `media/product-study-02.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 13
    | `media/product-study-03.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 14
    | `media/product-study-04.jpg` | https://www.apple.com/ipad-air/ |
  • Network accessline 15
    | `media/product-study-05.png` | https://www.apple.com/ipad-air/ |
  • Network accessline 16
    | `media/product-study-06.png` | https://www.apple.com/ipad-air/ |
  • Network accessline 17
    | `media/product-study-07.jpg` | https://www.apple.com/ipad-air/ |
  • Network accessline 18
    | `media/product-study-08.jpg` | https://www.apple.com/ |
  • Network accessline 19
    | `media/product-study-09.jpg` | https://www.apple.com/macbook-pro/ |
  • Network accessline 20
    | `media/product-study-10.jpg` | https://www.apple.com/macbook-pro/ |
  • Network accessline 21
    | `media/product-study-11.jpg` | https://www.apple.com/apple-watch-series-12/ |

.trae/skills/finesse-ui/examples/apple/motion.js

  • Executable scriptline 1
    Executable file

.trae/skills/finesse-ui/examples/apple/studies.js

  • Executable scriptline 1
    Executable file
  • Possible obfuscationline 29
    const tools={overview:`<a href="apple-bento.html">开始探索 →</a>`,bento:`<button id="guides" aria-pressed="false">显示网格线</button><button id="reflow" aria-pressed="false">切换主卡位置</button><label>间距 <input id="spacing" type="range" min="8" max="24"

.trae/skills/finesse-ui/examples/buildly-growth-dashboard.html

  • Network accessline 23
    radial-gradient(700px 500px at -6% 108%,rgba(255,106,43,.09),transparent 60%)} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.o
  • Network accessline 24
    body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type
  • Network accessline 25
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' h
  • Network accessline 152
    <button class="btn pri"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>Add Data</button>       <div class="icon-btn"><span class="dot">3</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path
  • Network accessline 153
    <div class="icon-btn"><span class="dot">3</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>       <img class="avatar" alt="account" src="data:image/svg+xml,
  • Network accessline 154
    <img class="avatar" alt="account" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff6a2b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-

.trae/skills/finesse-ui/examples/caliber-precision-horology.html

  • Network accessline 8
    /* finesse · register=brand · A=near-black+champagne-metal · B=serif-display+mono-metadata · C=spec-dense-diagram · D=CSS-only-SVG · E=machined-metal    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('htt
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 30
    /* substrate: grain + vignette */   .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter
  • Network accessline 31
    .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fract
  • Network accessline 32
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 418
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches; const SVGNS = 'http://www.w3.org/2000/svg';
  • Network accessline 419
    const SVGNS = 'http://www.w3.org/2000/svg';

.trae/skills/finesse-ui/examples/flux-fluid-simulation.html

  • Network accessline 8
    /* finesse · register=brand · A=violet/cyan-on-deep-ink · B=sans+mono · C=full-page-engine+scrims · D=WebGL-FBO · E=water&fluid    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@1,300;1,400&family=JetBrains+Mono:wght@400;500
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 22
    #c { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; }   .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .038;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
  • Network accessline 23
    .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .038;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type=
  • Network accessline 24
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.trae/skills/finesse-ui/examples/h5-brew-mobile-pdp.html

  • Network accessline 6
    <meta name="theme-color" content="#ffffff"> <title>烘豆日记 · 挂耳咖啡商品详情 — 移动端电商 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>烘豆日记 · 挂耳咖啡商品详情 — 移动端电商 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&family=Noto+Sans+SC:wght@300;400;500;700&family=Bodoni+Moda:wght@400;600&display=swap" rel="stylesheet">
  • Network accessline 446
    scroll-snap / object-fit 的 CSS 一行都不用改。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 447
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 448
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

.trae/skills/finesse-ui/examples/h5-fern-meal-desk.html

  • Network accessline 6
    <meta name="theme-color" content="#EDE7E0"> <title>食记 FERN TABLE · 一日三餐工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>食记 FERN TABLE · 一日三餐工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
  • Dangerous shell operationline 468
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;
  • Network accessline 473
    真实项目里把 PH(n) 换回真实 URL 就是全部迁移工作。菜谱能带走，4MB 的 JPEG 带不走。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 474
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 475
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

.trae/skills/finesse-ui/examples/h5-pawpal-app-shell.html

  • Network accessline 6
    <meta name="theme-color" content="#08090a"> <title>PAWPAL 毛毛档案 · 宠物养护 App — 移动端 UI</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>PAWPAL 毛毛档案 · 宠物养护 App — 移动端 UI</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  • Network accessline 643
    这正是把它做成占位「图片」而不是占位「色块」的原因。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 644
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 645
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

.trae/skills/finesse-ui/examples/h5-peach-daily-desk.html

  • Network accessline 6
    <meta name="theme-color" content="#FFF7F3"> <title>今天也好好的 PEACH DESK · 女生日常工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>今天也好好的 PEACH DESK · 女生日常工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@500;700;800&display=swap" rel="stylesheet">

.trae/skills/finesse-ui/examples/h5-sheet-lab.html

  • Network accessline 6
    <meta name="theme-color" content="#ecebe5"> <title>SHEET LAB · App 弹层交互实验室 — 移动端交互 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>SHEET LAB · App 弹层交互实验室 — 移动端交互 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
  • Dangerous shell operationline 617
    const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;

.trae/skills/finesse-ui/examples/huddle-team-workspace.html

  • Network accessline 174
    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg></div>       <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18
  • Network accessline 175
    <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>       <div class="acct"><img src="data:image/svg+xml,%3Csvg xmln
  • Network accessline 176
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%236c5ce7'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 185
    <div class="right">       <div class="stack">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-se
  • Network accessline 186
    <div class="stack">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-w
  • Network accessline 187
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 188
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 189
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 201
    <span class="tag hi">Due Today</span>           <h4>Intro to React Hooks</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23
  • Network accessline 202
    <h4>Intro to React Hooks</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sa
  • Network accessline 203
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 207
    <span class="tag md">This Week</span>           <h4>CSS Grid Workshop</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb
  • Network accessline 208
    <h4>CSS Grid Workshop</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-
  • Network accessline 209
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 213
    <span class="tag hi">Due Today</span>           <h4>Final Project Review</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23
  • Network accessline 214
    <h4>Final Project Review</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sa
  • Network accessline 215
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 243
    <div class="card reveal">       <div class="card-h"><h3>Weekly Leaderboard</h3><span class="see-all">See All</span></div>       <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%
  • Network accessline 244
    <div class="card-h"><h3>Weekly Leaderboard</h3><span class="see-all">See All</span></div>       <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fi
  • Network accessline 245
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 246
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 247
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 248
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23e0a33a'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 255
    <div class="card reveal">       <div class="card-h"><h3>Cohort Chat</h3><span class="see-all">See All</span></div>       <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3C
  • Network accessline 256
    <div class="card-h"><h3>Cohort Chat</h3><span class="see-all">See All</span></div>       <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill
  • Network accessline 257
    <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight

.trae/skills/finesse-ui/examples/inkline-publishing-cms.html

  • Network accessline 177
    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8 2 2 0 11-2.8 2.8 1.6 1.6 0 00-2.7 1.1 2 2 0 01-4 0 1.6 1.6 0 00-2.6-1.1 2 2 0 11-2.8-2.8A1.6 1.6 0 004 15a2 2 0 010-4 1.6 1.6
  • Network accessline 178
    <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>     <img class="avatar" alt="account" src="data:image/svg+xml,%3
  • Network accessline 179
    <img class="avatar" alt="account" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='3
  • Network accessline 205
    <div class="card profile reveal">         <div class="who">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='
  • Network accessline 206
    <div class="who">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32
  • Network accessline 207
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32' font-weight='700' fill='wh

.trae/skills/finesse-ui/examples/ledgerio-treasury-console.html

  • Network accessline 217
    <div class="search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>Search customers, plans…</div>     <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-
  • Network accessline 218
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>     <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 219
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700
  • Network accessline 266
    <div class="tx-icon"><svg viewBox="0 0 24 24"><path d="M7 8l-4 4 4 4M17 8l4 4-4 4M14 4l-4 16"/></svg></div>           <div><b>Recent Activity</b><span>Across all plans</span></div>           <div class="avatars"><img src="data:image/svg+xml
  • Network accessline 267
    <div><b>Recent Activity</b><span>Across all plans</span></div>           <div class="avatars"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3
  • Network accessline 268
    <div class="avatars"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='
  • Network accessline 270
    <div class="tx-row">           <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 271
    <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vie
  • Network accessline 272
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 276
    <div class="tx-row">           <div class="dot" style="background:var(--lav)"><svg viewBox="0 0 24 24" stroke="var(--lav-ink)" fill="none"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='ht
  • Network accessline 277
    <div class="dot" style="background:var(--lav)"><svg viewBox="0 0 24 24" stroke="var(--lav-ink)" fill="none"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewB
  • Network accessline 278
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b3fd6'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 282
    <div class="tx-row">           <div class="dot" style="background:#f1efe3"><svg viewBox="0 0 24 24" stroke="var(--ink-2)" fill="none"><path d="M17 8l-5-5-5 5M12 3v13"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http:/
  • Network accessline 283
    <div class="dot" style="background:#f1efe3"><svg viewBox="0 0 24 24" stroke="var(--ink-2)" fill="none"><path d="M17 8l-5-5-5 5M12 3v13"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='
  • Network accessline 284
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23e0a33a'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 288
    <div class="tx-row">           <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 289
    <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vie
  • Network accessline 290
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23627eea'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 394
    const Y=v=>H-pad-((v-min)/((max-min)||1))*(H-pad*2);   const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 395
    const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('s
  • Network accessline 396
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

.trae/skills/finesse-ui/examples/lib/Draggable.min.js

  • Network accessline 1
    /*!  * Draggable 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * Draggable 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _assertThisInitialized(e){
  • Possible obfuscationline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _assertThisInitialized(e){

.trae/skills/finesse-ui/examples/lib/Flip.min.js

  • Network accessline 1
    /*!  * Flip 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * Flip 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function p(t){var e=t.ownerDocument
  • Possible obfuscationline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function p(t){var e=t.ownerDocument

.trae/skills/finesse-ui/examples/lib/ScrollTrigger.min.js

  • Network accessline 1
    /*!  * ScrollTrigger 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * ScrollTrigger 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Possible obfuscationline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for

.trae/skills/finesse-ui/examples/lib/gsap.min.js

  • Network accessline 1
    /*!  * GSAP 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * GSAP 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Possible obfuscationline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prot

.trae/skills/finesse-ui/examples/morph-variable-type.html

  • Network accessline 8
    /* finesse · register=brand · A=near-mono-opacity-ladder · B=one-variable-font-all-roles · C=type-specimen · D=CSS-only-variable-font · E=letterform    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('http
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..900,50..150&family=JetBrains+Mono:wght@400;500&display=swap');   *, *::befor
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..900,50..150&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 21
    .mono { font-family:'JetBrains Mono',monospace; }   .grain { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.033;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='2
  • Network accessline 23
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.trae/skills/finesse-ui/examples/nodeflux-api-console.html

  • Network accessline 209
    <div class="brandline"><div class="lab">Postline</div><div class="word">Email Delivery</div></div>     <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></div>     <div class="acct"><i
  • Network accessline 210
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></div>     <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect widt
  • Network accessline 211
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%230d9488'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32' font-wei
  • Network accessline 346
    const Y=v=>H-pad-((v-min)/((max-min)||1))*(H-pad*2);   const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 347
    const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('s
  • Network accessline 348
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

.trae/skills/finesse-ui/examples/nova-brutal-typographic.html

  • Network accessline 8
    /* finesse · register=brand · A=bone/black+one-hot-accent · B=display-as-layout · C=oversized-type · D=GSAP · E=press&ink    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/cs
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital@1&display=swap');   * { margin: 0; padding:
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital@1&display=swap');
  • Network accessline 110
    <section class="hero">     <div class="kick">全球首个<b>纯数字</b>时装周。<br>48 间虚拟时装屋，<br>72 小时不落幕的秀场。</div>     <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" a
  • Network accessline 111
    <div class="kick">全球首个<b>纯数字</b>时装周。<br>48 间虚拟时装屋，<br>72 小时不落幕的秀场。</div>     <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" alt="look" /><div class="cap
  • Network accessline 112
    <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" alt="look" /><div class="cap">LOOK 01 — ATELIER NOVA</div></div>
  • Network accessline 133
    <div class="count" id="rwCount">01 / 06</div>     <div class="track" id="track">       <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><d
  • Network accessline 134
    <div class="track" id="track">       <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><div class="idx">SS26</div><div class="nm"><div clas
  • Network accessline 135
    <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><div class="idx">SS26</div><div class="nm"><div class="a">VELA</div><div class="b">PARIS
  • Network accessline 136
    <div class="look"><img src="https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 02</div><div class="idx">SS26</div><div class="nm"><div class="a">OBSCURA</div><div class="b">BERLIN</
  • Network accessline 137
    <div class="look tall"><img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 03</div><div class="idx">SS26</div><div class="nm"><div class="a">KAIROS</div><div class="b">TOKY
  • Network accessline 138
    <div class="look"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 04</div><div class="idx">SS26</div><div class="nm"><div class="a">MIRAGE</div><div class="b">SEOUL</di
  • Network accessline 139
    <div class="look tall"><img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 05</div><div class="idx">SS26</div><div class="nm"><div class="a">SOLSTICE</div><div class="b">NE
  • Network accessline 140
    <div class="look"><img src="https://images.unsplash.com/photo-1502716119720-b23a93e5fe1b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 06</div><div class="idx">SS26</div><div class="nm"><div class="a">AURUM</div><div class="b">MILAN</div
  • Network accessline 145
    <section class="feature">     <div class="stick">       <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>
  • Network accessline 146
    <div class="stick">       <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>       <div class="ftxt"><h2 class="anton">SEE THE<br>UNSEEN</h2><p>003 — CLO
  • Network accessline 147
    <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>

.trae/skills/finesse-ui/examples/offscreen-editorial.html

  • Network accessline 8
    /* finesse · register=brand · A=cream/ink-light · B=serif-pair · C=ruled-editorial-columns · D=GSAP-scroll-reveal · E=paper&press    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapi
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,500&family=Spectral:ital,wght@0,300;0,400;1,300&family=Inter:wght@40
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,500&family=Spectral:ital,wght@0,300;0,400;1,300&family=Inter:wght@400;500&display=swap');
  • Network accessline 115
    </div>     <div class="right">       <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />
  • Network accessline 116
    <div class="right">       <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />       <div class="feat"><div class="label" style="opacity:.85">封面影像 — COVER STORY</div><h2 class="p
  • Network accessline 117
    <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />
  • Network accessline 142
    <!-- FULL BLEED PLATE -->   <section class="plate">     <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />
  • Network accessline 143
    <section class="plate">     <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />     <div class="meta">
  • Network accessline 144
    <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />

.trae/skills/finesse-ui/examples/pawcare-adaptive-health.html

  • Network accessline 239
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="3.2"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8 2 2 0 11-2.8 2.8 1.6 1.6 0 00-2.7 1.1 2 2 0 01-4 0 1.6 1.6 0 00-2.6-1.1 2 2 0 11-2.8-2.8A1.6 1.6 0
  • Network accessline 240
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg><span class="bad">5</span></div>     <div class="acct"><img src="data:im
  • Network accessline 241
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%231f8a86'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 265
    <div class="card profile-card reveal">         <div class="profile-top">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'
  • Network accessline 266
    <div class="profile-top">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3
  • Network accessline 267
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3E%3Cstop offset='1' stop-color='%23f
  • Network accessline 287
    <div class="center-col">       <div class="hero-img reveal">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop off
  • Network accessline 288
    <div class="hero-img reveal">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/
  • Network accessline 289
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3E%3Cstop offset='1' stop-color='%23f
  • Network accessline 383
    if(fill){     const fd=d+' L '+X(vals.length-1).toFixed(1)+' '+H+' L '+X(0).toFixed(1)+' '+H+' Z';     const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 384
    const fd=d+' L '+X(vals.length-1).toFixed(1)+' '+H+' L '+X(0).toFixed(1)+' '+H+' Z';     const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');     fpath.setAttribute('d',fd);fpath.classList.add('theme-fill');fpath.style
  • Network accessline 385
    const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 388
    if(!reduce){gsap.to(fpath,{opacity:1,duration:.8,delay:.7});}else{fpath.style.opacity=1;}   }   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 389
    }   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.classList.add('theme-stroke');path.style.fill='none';path.style.stroke=color;
  • Network accessline 390
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 405
    const svg=document.getElementById('sparkEcg');   const d='M0 26 L28 26 L36 10 L44 42 L52 26 L70 26 L78 18 L86 34 L94 26 L120 26 L128 10 L136 42 L144 26 L162 26 L170 18 L178 34 L186 26 L240 26';   const path=document.createElementNS('http://
  • Network accessline 406
    const d='M0 26 L28 26 L36 10 L44 42 L52 26 L70 26 L78 18 L86 34 L94 26 L120 26 L128 10 L136 42 L144 26 L162 26 L170 18 L178 34 L186 26 L240 26';   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute
  • Network accessline 407
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

.trae/skills/finesse-ui/examples/relay-agent-console.html

  • Network accessline 5
    <meta name="viewport" content="width=device-width, initial-scale=1"> <title>RELAY 订单异常处理台 · AI 工作台 — Web</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 6
    <title>RELAY 订单异常处理台 · AI 工作台 — Web</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 7
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 9
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
  • Dangerous shell operationline 492
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;
  • Access to secretsline 569
    [Credential-related source omitted]
  • Dangerous shell operationline 732
    el.scrollIntoView({behavior: RM ? 'auto' : 'smooth', block:'center'});
  • Dangerous shell operationline 736
    document.querySelector('.aside-scroll').scrollTo({top:0, behavior: RM ? 'auto' : 'smooth'});
  • Dangerous shell operationline 843
    el.scrollIntoView({behavior: RM ? 'auto' : 'smooth', block:'center'});

.trae/skills/finesse-ui/examples/signal-phosphor-terminal.html

  • Network accessline 8
    /* finesse · register=brand · A=mono+single-acid · B=mono-forward · C=live-data-panel · D=Canvas-2D · E=signal&phosphor    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;700&display=swap');   *, *::before, *::after { margin
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;700&display=swap');
  • Network accessline 28
    #c { position:fixed; inset:0; width:100%; height:100%; z-index:0; }   .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wid
  • Network accessline 29
    .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fract
  • Network accessline 30
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.trae/skills/finesse-ui/examples/sparkcraft-bauhaus-geometric.html

  • Network accessline 8
    /* finesse · register=brand · A=warm-paper+five-primaries · B=geometric-display+humanist-sans · C=geometric-collage · D=CSS-only-geometry · E=building-blocks    * back-filled from EXAMPLES.md; dials not recorded for this build */ @import ur
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap'); *,*::before,*::after{margin:0;
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

.trae/skills/finesse-ui/examples/stakent-monitoring-dashboard.html

  • Network accessline 22
    radial-gradient(700px 500px at 100% 60%,rgba(167,139,250,.10),transparent 60%)} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.
  • Network accessline 23
    body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type
  • Network accessline 24
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' he
  • Network accessline 180
    <main class="main">     <div class="topbar">       <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y
  • Network accessline 181
    <div class="topbar">       <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y='52' font-family='sans-
  • Network accessline 182
    <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-

.trae/skills/finesse-ui/examples/studio-quiet-luxury.html

  • Network accessline 8
    /* finesse · register=brand · A=off-white+forest-sage · B=one-family-100-900 · C=max-whitespace-split · D=CSS-only-dual-mask · E=concrete&light    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://f
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;600;800;900&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=s
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;600;800;900&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 20
    两个面只要够不一样就成立，不必是照片。真实项目里换回真实 URL 即可。        注意 SVG 里的片段引用必须写 %23（CSS 里 # 会被当成 URL fragment）。 */     --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><line
  • Network accessline 21
    注意 SVG 里的片段引用必须写 %23（CSS 里 # 会被当成 URL fragment）。 */     --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1
  • Network accessline 22
    --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='hsl(38 9%25 78%25)'/><sto
  • Network accessline 23
    --ph-reveal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='h' x1='0' y1='0' x2='.4' y2='1'><stop offset='0' stop-color='hsl(45 16%25 95%25)'/
  • Network accessline 24
    --ph-p1:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700' preserveAspectRatio='none'><rect width='900' height='700' fill='hsl(36 10%25 70%25)'/><rect x='0' y='430' width='900' height='270' fill='hsl(
  • Network accessline 25
    --ph-p2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' preserveAspectRatio='none'><rect width='700' height='700' fill='hsl(90 7%25 64%25)'/><path d='M0 470 L700 410 L700 700 L0 700Z' fill='hsl(96
  • Network accessline 26
    --ph-p3:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' preserveAspectRatio='none'><rect width='700' height='700' fill='hsl(40 12%25 82%25)'/><rect x='0' y='500' width='700' height='200' fill='hsl(

.trae/skills/finesse-ui/references/3d-effects.md

  • Network accessline 151
    <script type="importmap"> { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 152
    { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 153
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 154
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"

.trae/skills/finesse-ui/references/apple-design.md

  • Network accessline 78
    - [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/): platform guidance; consult the relevant platform when implementing native behavior.
  • Network accessline 79
    - [Designing Fluid Interfaces, WWDC 2018](https://developer.apple.com/videos/play/wwdc2018/803/): interaction continuity and direct manipulation.
  • Network accessline 80
    - [Community apple-design reference](https://github.com/attentiondotnet/emilkowalski_skills/blob/main/skills/apple-design/SKILL.md): secondary synthesis; principles were adapted, not copied wholesale or treated as official parameter tables.
  • Network accessline 81
    - [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill): Bento and spatial style taxonomy. Its decorative Liquid Glass recipe is not a universal Apple requirement.

.trae/skills/finesse-ui/references/asset-sourcing.md

  • Access to secretsline 50
    [Credential-related source omitted]
  • Network accessline 79
    - **Don't imply endorsement.** A stock photo of a person is not that person endorsing the (often fictional) brand — fine for mood/lifestyle imagery, not fine as a fake "customer testimonial" headshot presented as real. - **Real alt text**,
  • Network accessline 81
    - **If hotlinking turns out to be slow or unreliable once actually wired in** — a request hangs, takes far longer than a normal image fetch (tens of seconds instead of near-instant), or times out during your own verification pass — **stop a

.trae/skills/finesse-ui/references/chart-crafting.md

  • Network accessline 140
    > **First: make GSAP available.** Every `gsap.*` call below assumes GSAP is loaded — a `gsap.*` call with no GSAP on the page just silently does nothing (and your chart never reveals). Pick one, before your script runs: > - **Self-host (pre
  • Network accessline 141
    > - **Self-host (preferred — offline-safe, zero remote dependency, version frozen):** put `gsap.min.js` (+ `ScrollTrigger.min.js` only if you use scroll) in `./lib/`, then `<script src="lib/gsap.min.js"></script>`. This is what the bundled
  • Network accessline 142
    > - **CDN (only if the project allows remote deps):** `<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>`.
  • Dangerous shell operationline 162
    const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;

.trae/skills/finesse-ui/references/design-dna.md

  • Network accessline 71
    position: fixed; inset: 0; z-index: 1; pointer-events: none;   opacity: .032;   /* .025–.05. Dark pages lower, busy pages higher */   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20
  • Network accessline 72
    opacity: .032;   /* .025–.05. Dark pages lower, busy pages higher */   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' bas
  • Network accessline 73
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 204
    <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 205
    <style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');   *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  • Network accessline 206
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 210
    body { background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }   body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:
  • Network accessline 211
    body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.032;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurb
  • Network accessline 212
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

.trae/skills/finesse-ui/references/h5-mobile.md

  • Dangerous shell operationline 460
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;

.trae/skills/finesse-ui/references/motion.md

  • Dangerous shell operationline 31
    const RM   = matchMedia('(prefers-reduced-motion: reduce)').matches;
  • Network accessline 152
    content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;   opacity: .04; mix-blend-mode: overlay; background-size: 180px 180px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfi
  • Network accessline 153
    opacity: .04; mix-blend-mode: overlay; background-size: 180px 180px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctav
  • Network accessline 154
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' heig

.trae/skills/finesse-ui/scripts/detect.mjs

  • Executable scriptline 1
    #!/usr/bin/env node

.trae/skills/finesse-ui/scripts/test-apple-detector.mjs

  • Executable scriptline 1
    Executable file

skills/finesse-ui/SKILL.md

  • Dangerous shell operationline 487
    - **Capability-probe pattern (the ship-ready shape):** read the probes once at the top — `const RM = matchMedia('(prefers-reduced-motion:reduce)').matches; const FINE = matchMedia('(hover:hover) and (pointer:fine)').matches;` — then branch
  • Dangerous shell operationline 487
    - **Capability-probe pattern (the ship-ready shape):** read the probes once at the top — `const RM = matchMedia('(prefers-reduced-motion:reduce)').matches; const FINE = matchMedia('(hover:hover) and (pointer:fine)').matches;` — then branch

skills/finesse-ui/examples/aether-cinematic-tech.html

  • Network accessline 8
    /* finesse · register=brand · A=dual-hue-near-black · B=sans+mono · C=full-bleed-engine-hero · D=Three.js+GLSL · E=circuitry&signal    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googlea
  • Network accessline 8
    /* finesse · register=brand · A=dual-hue-near-black · B=sans+mono · C=full-bleed-engine-hero · D=Three.js+GLSL · E=circuitry&signal    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googlea
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&family=JetBrains+Mono:wght
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&family=JetBrains+Mono:wght
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 21
    #c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }   .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;     background-image: url("data:image/svg+xml,%3Csvg xmlns='htt
  • Network accessline 21
    #c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }   .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;     background-image: url("data:image/svg+xml,%3Csvg xmlns='htt
  • Network accessline 22
    .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='
  • Network accessline 22
    .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='
  • Network accessline 23
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 23
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 114
    <script type="importmap"> { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 114
    <script type="importmap"> { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 115
    { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 115
    { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 116
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 116
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 117
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 117
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"

skills/finesse-ui/examples/apple/ASSETS.md

  • Network accessline 9
    | Bundled file | Public source | | --- | --- | | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 9
    | Bundled file | Public source | | --- | --- | | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 10
    | --- | --- | | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ | | `media/product-study-02.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 10
    | --- | --- | | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ | | `media/product-study-02.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 11
    | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 11
    | `media/product-study-01.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 12
    | `media/product-study-02.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 12
    | `media/product-study-02.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 13
    | `media/product-study-03.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 13
    | `media/product-study-03.jpg` | https://www.apple.com/airpods-max/ |
  • Network accessline 14
    | `media/product-study-04.jpg` | https://www.apple.com/ipad-air/ |
  • Network accessline 14
    | `media/product-study-04.jpg` | https://www.apple.com/ipad-air/ |
  • Network accessline 15
    | `media/product-study-05.png` | https://www.apple.com/ipad-air/ |
  • Network accessline 15
    | `media/product-study-05.png` | https://www.apple.com/ipad-air/ |
  • Network accessline 16
    | `media/product-study-06.png` | https://www.apple.com/ipad-air/ |
  • Network accessline 16
    | `media/product-study-06.png` | https://www.apple.com/ipad-air/ |
  • Network accessline 17
    | `media/product-study-07.jpg` | https://www.apple.com/ipad-air/ |
  • Network accessline 17
    | `media/product-study-07.jpg` | https://www.apple.com/ipad-air/ |
  • Network accessline 18
    | `media/product-study-08.jpg` | https://www.apple.com/ |
  • Network accessline 18
    | `media/product-study-08.jpg` | https://www.apple.com/ |
  • Network accessline 19
    | `media/product-study-09.jpg` | https://www.apple.com/macbook-pro/ |
  • Network accessline 19
    | `media/product-study-09.jpg` | https://www.apple.com/macbook-pro/ |
  • Network accessline 20
    | `media/product-study-10.jpg` | https://www.apple.com/macbook-pro/ |
  • Network accessline 20
    | `media/product-study-10.jpg` | https://www.apple.com/macbook-pro/ |
  • Network accessline 21
    | `media/product-study-11.jpg` | https://www.apple.com/apple-watch-series-12/ |
  • Network accessline 21
    | `media/product-study-11.jpg` | https://www.apple.com/apple-watch-series-12/ |

skills/finesse-ui/examples/apple/motion.js

  • Executable scriptline 1
    Executable file
  • Executable scriptline 1
    Executable file

skills/finesse-ui/examples/apple/studies.js

  • Executable scriptline 1
    Executable file
  • Executable scriptline 1
    Executable file
  • Possible obfuscationline 29
    const tools={overview:`<a href="apple-bento.html">开始探索 →</a>`,bento:`<button id="guides" aria-pressed="false">显示网格线</button><button id="reflow" aria-pressed="false">切换主卡位置</button><label>间距 <input id="spacing" type="range" min="8" max="24"
  • Possible obfuscationline 29
    const tools={overview:`<a href="apple-bento.html">开始探索 →</a>`,bento:`<button id="guides" aria-pressed="false">显示网格线</button><button id="reflow" aria-pressed="false">切换主卡位置</button><label>间距 <input id="spacing" type="range" min="8" max="24"

skills/finesse-ui/examples/buildly-growth-dashboard.html

  • Network accessline 23
    radial-gradient(700px 500px at -6% 108%,rgba(255,106,43,.09),transparent 60%)} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.o
  • Network accessline 23
    radial-gradient(700px 500px at -6% 108%,rgba(255,106,43,.09),transparent 60%)} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.o
  • Network accessline 24
    body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type
  • Network accessline 24
    body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type
  • Network accessline 25
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' h
  • Network accessline 25
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' h
  • Network accessline 152
    <button class="btn pri"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>Add Data</button>       <div class="icon-btn"><span class="dot">3</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path
  • Network accessline 152
    <button class="btn pri"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>Add Data</button>       <div class="icon-btn"><span class="dot">3</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path
  • Network accessline 153
    <div class="icon-btn"><span class="dot">3</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>       <img class="avatar" alt="account" src="data:image/svg+xml,
  • Network accessline 153
    <div class="icon-btn"><span class="dot">3</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>       <img class="avatar" alt="account" src="data:image/svg+xml,
  • Network accessline 154
    <img class="avatar" alt="account" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff6a2b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-
  • Network accessline 154
    <img class="avatar" alt="account" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff6a2b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-

skills/finesse-ui/examples/caliber-precision-horology.html

  • Network accessline 8
    /* finesse · register=brand · A=near-black+champagne-metal · B=serif-display+mono-metadata · C=spec-dense-diagram · D=CSS-only-SVG · E=machined-metal    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('htt
  • Network accessline 8
    /* finesse · register=brand · A=near-black+champagne-metal · B=serif-display+mono-metadata · C=spec-dense-diagram · D=CSS-only-SVG · E=machined-metal    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('htt
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 30
    /* substrate: grain + vignette */   .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter
  • Network accessline 30
    /* substrate: grain + vignette */   .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter
  • Network accessline 31
    .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fract
  • Network accessline 31
    .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fract
  • Network accessline 32
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 32
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 418
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches; const SVGNS = 'http://www.w3.org/2000/svg';
  • Network accessline 418
    const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches; const SVGNS = 'http://www.w3.org/2000/svg';
  • Network accessline 419
    const SVGNS = 'http://www.w3.org/2000/svg';
  • Network accessline 419
    const SVGNS = 'http://www.w3.org/2000/svg';

skills/finesse-ui/examples/flux-fluid-simulation.html

  • Network accessline 8
    /* finesse · register=brand · A=violet/cyan-on-deep-ink · B=sans+mono · C=full-page-engine+scrims · D=WebGL-FBO · E=water&fluid    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.
  • Network accessline 8
    /* finesse · register=brand · A=violet/cyan-on-deep-ink · B=sans+mono · C=full-page-engine+scrims · D=WebGL-FBO · E=water&fluid    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@1,300;1,400&family=JetBrains+Mono:wght@400;500
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@1,300;1,400&family=JetBrains+Mono:wght@400;500
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 22
    #c { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; }   .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .038;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
  • Network accessline 22
    #c { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; }   .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .038;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
  • Network accessline 23
    .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .038;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type=
  • Network accessline 23
    .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .038;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type=
  • Network accessline 24
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 24
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

skills/finesse-ui/examples/h5-brew-mobile-pdp.html

  • Network accessline 6
    <meta name="theme-color" content="#ffffff"> <title>烘豆日记 · 挂耳咖啡商品详情 — 移动端电商 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 6
    <meta name="theme-color" content="#ffffff"> <title>烘豆日记 · 挂耳咖啡商品详情 — 移动端电商 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>烘豆日记 · 挂耳咖啡商品详情 — 移动端电商 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 7
    <title>烘豆日记 · 挂耳咖啡商品详情 — 移动端电商 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&family=Noto+Sans+SC:wght@300;400;500;700&family=Bodoni+Moda:wght@400;600&display=swap" rel="stylesheet">
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&family=Noto+Sans+SC:wght@300;400;500;700&family=Bodoni+Moda:wght@400;600&display=swap" rel="stylesheet">
  • Network accessline 446
    scroll-snap / object-fit 的 CSS 一行都不用改。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 446
    scroll-snap / object-fit 的 CSS 一行都不用改。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 447
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 447
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 448
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 448
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

skills/finesse-ui/examples/h5-fern-meal-desk.html

  • Network accessline 6
    <meta name="theme-color" content="#EDE7E0"> <title>食记 FERN TABLE · 一日三餐工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 6
    <meta name="theme-color" content="#EDE7E0"> <title>食记 FERN TABLE · 一日三餐工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>食记 FERN TABLE · 一日三餐工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 7
    <title>食记 FERN TABLE · 一日三餐工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
  • Dangerous shell operationline 468
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;
  • Dangerous shell operationline 468
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;
  • Network accessline 473
    真实项目里把 PH(n) 换回真实 URL 就是全部迁移工作。菜谱能带走，4MB 的 JPEG 带不走。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 473
    真实项目里把 PH(n) 换回真实 URL 就是全部迁移工作。菜谱能带走，4MB 的 JPEG 带不走。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 474
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 474
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 475
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 475
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

skills/finesse-ui/examples/h5-pawpal-app-shell.html

  • Network accessline 6
    <meta name="theme-color" content="#08090a"> <title>PAWPAL 毛毛档案 · 宠物养护 App — 移动端 UI</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 6
    <meta name="theme-color" content="#08090a"> <title>PAWPAL 毛毛档案 · 宠物养护 App — 移动端 UI</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>PAWPAL 毛毛档案 · 宠物养护 App — 移动端 UI</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 7
    <title>PAWPAL 毛毛档案 · 宠物养护 App — 移动端 UI</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  • Network accessline 643
    这正是把它做成占位「图片」而不是占位「色块」的原因。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 643
    这正是把它做成占位「图片」而不是占位「色块」的原因。 */   const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 644
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 644
    const PH = h => 'data:image/svg+xml;utf8,' + encodeURIComponent(     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">        <defs><linearGradient id="g" x1="0" y1="0" x2=".7" y2="1">
  • Network accessline 645
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  • Network accessline 645
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">

skills/finesse-ui/examples/h5-peach-daily-desk.html

  • Network accessline 6
    <meta name="theme-color" content="#FFF7F3"> <title>今天也好好的 PEACH DESK · 女生日常工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 6
    <meta name="theme-color" content="#FFF7F3"> <title>今天也好好的 PEACH DESK · 女生日常工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>今天也好好的 PEACH DESK · 女生日常工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 7
    <title>今天也好好的 PEACH DESK · 女生日常工作台 — H5 App 原型</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@500;700;800&display=swap" rel="stylesheet">
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@500;700;800&display=swap" rel="stylesheet">

skills/finesse-ui/examples/h5-sheet-lab.html

  • Network accessline 6
    <meta name="theme-color" content="#ecebe5"> <title>SHEET LAB · App 弹层交互实验室 — 移动端交互 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 6
    <meta name="theme-color" content="#ecebe5"> <title>SHEET LAB · App 弹层交互实验室 — 移动端交互 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <title>SHEET LAB · App 弹层交互实验室 — 移动端交互 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 7
    <title>SHEET LAB · App 弹层交互实验室 — 移动端交互 H5</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
  • Network accessline 10
    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
  • Dangerous shell operationline 617
    const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;
  • Dangerous shell operationline 617
    const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;

skills/finesse-ui/examples/huddle-team-workspace.html

  • Network accessline 174
    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg></div>       <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18
  • Network accessline 174
    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg></div>       <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18
  • Network accessline 175
    <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>       <div class="acct"><img src="data:image/svg+xml,%3Csvg xmln
  • Network accessline 175
    <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>       <div class="acct"><img src="data:image/svg+xml,%3Csvg xmln
  • Network accessline 176
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%236c5ce7'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 176
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%236c5ce7'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 185
    <div class="right">       <div class="stack">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-se
  • Network accessline 185
    <div class="right">       <div class="stack">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-se
  • Network accessline 186
    <div class="stack">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-w
  • Network accessline 186
    <div class="stack">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-w
  • Network accessline 187
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 187
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 188
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 188
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 189
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 189
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700' fill='white' tex
  • Network accessline 201
    <span class="tag hi">Due Today</span>           <h4>Intro to React Hooks</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23
  • Network accessline 201
    <span class="tag hi">Due Today</span>           <h4>Intro to React Hooks</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23
  • Network accessline 202
    <h4>Intro to React Hooks</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sa
  • Network accessline 202
    <h4>Intro to React Hooks</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sa
  • Network accessline 203
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 203
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 207
    <span class="tag md">This Week</span>           <h4>CSS Grid Workshop</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb
  • Network accessline 207
    <span class="tag md">This Week</span>           <h4>CSS Grid Workshop</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb
  • Network accessline 208
    <h4>CSS Grid Workshop</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-
  • Network accessline 208
    <h4>CSS Grid Workshop</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-
  • Network accessline 209
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 209
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 213
    <span class="tag hi">Due Today</span>           <h4>Final Project Review</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23
  • Network accessline 213
    <span class="tag hi">Due Today</span>           <h4>Final Project Review</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23
  • Network accessline 214
    <h4>Final Project Review</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sa
  • Network accessline 214
    <h4>Final Project Review</h4>           <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sa
  • Network accessline 215
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 215
    <div class="stack"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='70
  • Network accessline 243
    <div class="card reveal">       <div class="card-h"><h3>Weekly Leaderboard</h3><span class="see-all">See All</span></div>       <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%
  • Network accessline 243
    <div class="card reveal">       <div class="card-h"><h3>Weekly Leaderboard</h3><span class="see-all">See All</span></div>       <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%
  • Network accessline 244
    <div class="card-h"><h3>Weekly Leaderboard</h3><span class="see-all">See All</span></div>       <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fi
  • Network accessline 244
    <div class="card-h"><h3>Weekly Leaderboard</h3><span class="see-all">See All</span></div>       <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fi
  • Network accessline 245
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 245
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 246
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 246
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%232fb680'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 247
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 247
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23ff8b6b'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 248
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23e0a33a'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 248
    <div class="rank"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23e0a33a'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 255
    <div class="card reveal">       <div class="card-h"><h3>Cohort Chat</h3><span class="see-all">See All</span></div>       <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3C
  • Network accessline 255
    <div class="card reveal">       <div class="card-h"><h3>Cohort Chat</h3><span class="see-all">See All</span></div>       <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3C
  • Network accessline 256
    <div class="card-h"><h3>Cohort Chat</h3><span class="see-all">See All</span></div>       <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill
  • Network accessline 256
    <div class="card-h"><h3>Cohort Chat</h3><span class="see-all">See All</span></div>       <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill
  • Network accessline 257
    <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight
  • Network accessline 257
    <div class="chat-head"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b8def'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight

skills/finesse-ui/examples/inkline-publishing-cms.html

  • Network accessline 177
    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8 2 2 0 11-2.8 2.8 1.6 1.6 0 00-2.7 1.1 2 2 0 01-4 0 1.6 1.6 0 00-2.6-1.1 2 2 0 11-2.8-2.8A1.6 1.6 0 004 15a2 2 0 010-4 1.6 1.6
  • Network accessline 177
    <div class="icon-btn"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8 2 2 0 11-2.8 2.8 1.6 1.6 0 00-2.7 1.1 2 2 0 01-4 0 1.6 1.6 0 00-2.6-1.1 2 2 0 11-2.8-2.8A1.6 1.6 0 004 15a2 2 0 010-4 1.6 1.6
  • Network accessline 178
    <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>     <img class="avatar" alt="account" src="data:image/svg+xml,%3
  • Network accessline 178
    <div class="icon-btn"><span class="dot">4</span><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>     <img class="avatar" alt="account" src="data:image/svg+xml,%3
  • Network accessline 179
    <img class="avatar" alt="account" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='3
  • Network accessline 179
    <img class="avatar" alt="account" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='3
  • Network accessline 205
    <div class="card profile reveal">         <div class="who">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='
  • Network accessline 205
    <div class="card profile reveal">         <div class="who">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='
  • Network accessline 206
    <div class="who">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32
  • Network accessline 206
    <div class="who">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32
  • Network accessline 207
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32' font-weight='700' fill='wh
  • Network accessline 207
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%236d28d9'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32' font-weight='700' fill='wh

skills/finesse-ui/examples/ledgerio-treasury-console.html

  • Network accessline 217
    <div class="search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>Search customers, plans…</div>     <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-
  • Network accessline 217
    <div class="search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>Search customers, plans…</div>     <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-
  • Network accessline 218
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>     <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 218
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg></div>     <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 219
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700
  • Network accessline 219
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700
  • Network accessline 266
    <div class="tx-icon"><svg viewBox="0 0 24 24"><path d="M7 8l-4 4 4 4M17 8l4 4-4 4M14 4l-4 16"/></svg></div>           <div><b>Recent Activity</b><span>Across all plans</span></div>           <div class="avatars"><img src="data:image/svg+xml
  • Network accessline 266
    <div class="tx-icon"><svg viewBox="0 0 24 24"><path d="M7 8l-4 4 4 4M17 8l4 4-4 4M14 4l-4 16"/></svg></div>           <div><b>Recent Activity</b><span>Across all plans</span></div>           <div class="avatars"><img src="data:image/svg+xml
  • Network accessline 267
    <div><b>Recent Activity</b><span>Across all plans</span></div>           <div class="avatars"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3
  • Network accessline 267
    <div><b>Recent Activity</b><span>Across all plans</span></div>           <div class="avatars"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3
  • Network accessline 268
    <div class="avatars"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='
  • Network accessline 268
    <div class="avatars"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='
  • Network accessline 270
    <div class="tx-row">           <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 270
    <div class="tx-row">           <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 271
    <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vie
  • Network accessline 271
    <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vie
  • Network accessline 272
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 272
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%230f8a3e'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 276
    <div class="tx-row">           <div class="dot" style="background:var(--lav)"><svg viewBox="0 0 24 24" stroke="var(--lav-ink)" fill="none"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='ht
  • Network accessline 276
    <div class="tx-row">           <div class="dot" style="background:var(--lav)"><svg viewBox="0 0 24 24" stroke="var(--lav-ink)" fill="none"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='ht
  • Network accessline 277
    <div class="dot" style="background:var(--lav)"><svg viewBox="0 0 24 24" stroke="var(--lav-ink)" fill="none"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewB
  • Network accessline 277
    <div class="dot" style="background:var(--lav)"><svg viewBox="0 0 24 24" stroke="var(--lav-ink)" fill="none"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewB
  • Network accessline 278
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b3fd6'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 278
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%235b3fd6'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 282
    <div class="tx-row">           <div class="dot" style="background:#f1efe3"><svg viewBox="0 0 24 24" stroke="var(--ink-2)" fill="none"><path d="M17 8l-5-5-5 5M12 3v13"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http:/
  • Network accessline 282
    <div class="tx-row">           <div class="dot" style="background:#f1efe3"><svg viewBox="0 0 24 24" stroke="var(--ink-2)" fill="none"><path d="M17 8l-5-5-5 5M12 3v13"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http:/
  • Network accessline 283
    <div class="dot" style="background:#f1efe3"><svg viewBox="0 0 24 24" stroke="var(--ink-2)" fill="none"><path d="M17 8l-5-5-5 5M12 3v13"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='
  • Network accessline 283
    <div class="dot" style="background:#f1efe3"><svg viewBox="0 0 24 24" stroke="var(--ink-2)" fill="none"><path d="M17 8l-5-5-5 5M12 3v13"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='
  • Network accessline 284
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23e0a33a'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 284
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23e0a33a'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 288
    <div class="tx-row">           <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 288
    <div class="tx-row">           <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='
  • Network accessline 289
    <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vie
  • Network accessline 289
    <div class="dot" style="background:var(--mint)"><svg viewBox="0 0 24 24" stroke="var(--mint-ink)" fill="none"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' vie
  • Network accessline 290
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23627eea'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 290
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%23627eea'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='28' font-weight='700' fill='white' tex
  • Network accessline 394
    const Y=v=>H-pad-((v-min)/((max-min)||1))*(H-pad*2);   const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 394
    const Y=v=>H-pad-((v-min)/((max-min)||1))*(H-pad*2);   const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 395
    const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('s
  • Network accessline 395
    const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('s
  • Network accessline 396
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 396
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

skills/finesse-ui/examples/lib/Draggable.min.js

  • Network accessline 1
    /*!  * Draggable 3.13.0  * https://gsap.com
  • Network accessline 1
    /*!  * Draggable 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * Draggable 3.13.0  * https://gsap.com  *
  • Network accessline 2
    * Draggable 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _assertThisInitialized(e){
  • Network accessline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _assertThisInitialized(e){
  • Possible obfuscationline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _assertThisInitialized(e){
  • Possible obfuscationline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _assertThisInitialized(e){

skills/finesse-ui/examples/lib/Flip.min.js

  • Network accessline 1
    /*!  * Flip 3.13.0  * https://gsap.com
  • Network accessline 1
    /*!  * Flip 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * Flip 3.13.0  * https://gsap.com  *
  • Network accessline 2
    * Flip 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function p(t){var e=t.ownerDocument
  • Network accessline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function p(t){var e=t.ownerDocument
  • Possible obfuscationline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function p(t){var e=t.ownerDocument
  • Possible obfuscationline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function p(t){var e=t.ownerDocument

skills/finesse-ui/examples/lib/ScrollTrigger.min.js

  • Network accessline 1
    /*!  * ScrollTrigger 3.13.0  * https://gsap.com
  • Network accessline 1
    /*!  * ScrollTrigger 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * ScrollTrigger 3.13.0  * https://gsap.com  *
  • Network accessline 2
    * ScrollTrigger 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Possible obfuscationline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for
  • Possible obfuscationline 10
    !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for

skills/finesse-ui/examples/lib/gsap.min.js

  • Network accessline 1
    /*!  * GSAP 3.13.0  * https://gsap.com
  • Network accessline 1
    /*!  * GSAP 3.13.0  * https://gsap.com
  • Executable scriptline 1
    Executable file
  • Executable scriptline 1
    Executable file
  • Network accessline 2
    * GSAP 3.13.0  * https://gsap.com  *
  • Network accessline 2
    * GSAP 3.13.0  * https://gsap.com  *
  • Network accessline 3
    * https://gsap.com
  • Network accessline 3
    * https://gsap.com
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 4
    *   * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 5
    * @license Copyright 2025, GreenSock. All rights reserved.  * Subject to the terms at https://gsap.com/standard-license.  * @author: Jack Doyle, jack@greensock.com
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Network accessline 6
    * Subject to the terms at https://gsap.com/standard-license.
  • Possible obfuscationline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prot
  • Possible obfuscationline 10
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prot

skills/finesse-ui/examples/morph-variable-type.html

  • Network accessline 8
    /* finesse · register=brand · A=near-mono-opacity-ladder · B=one-variable-font-all-roles · C=type-specimen · D=CSS-only-variable-font · E=letterform    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('http
  • Network accessline 8
    /* finesse · register=brand · A=near-mono-opacity-ladder · B=one-variable-font-all-roles · C=type-specimen · D=CSS-only-variable-font · E=letterform    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('http
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..900,50..150&family=JetBrains+Mono:wght@400;500&display=swap');   *, *::befor
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..900,50..150&family=JetBrains+Mono:wght@400;500&display=swap');   *, *::befor
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..900,50..150&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,wdth@8..144,100..900,50..150&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 21
    .mono { font-family:'JetBrains Mono',monospace; }   .grain { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.033;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='2
  • Network accessline 21
    .mono { font-family:'JetBrains Mono',monospace; }   .grain { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.033;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='2
  • Network accessline 23
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 23
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

skills/finesse-ui/examples/nodeflux-api-console.html

  • Network accessline 209
    <div class="brandline"><div class="lab">Postline</div><div class="word">Email Delivery</div></div>     <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></div>     <div class="acct"><i
  • Network accessline 209
    <div class="brandline"><div class="lab">Postline</div><div class="word">Email Delivery</div></div>     <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></div>     <div class="acct"><i
  • Network accessline 210
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></div>     <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect widt
  • Network accessline 210
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M12 5v14M5 12h14"/></svg></div>     <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect widt
  • Network accessline 211
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%230d9488'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32' font-wei
  • Network accessline 211
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' rx='40' fill='%230d9488'/%3E%3Ctext x='40' y='53' font-family='sans-serif' font-size='32' font-wei
  • Network accessline 346
    const Y=v=>H-pad-((v-min)/((max-min)||1))*(H-pad*2);   const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 346
    const Y=v=>H-pad-((v-min)/((max-min)||1))*(H-pad*2);   const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 347
    const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('s
  • Network accessline 347
    const d=vals.map((v,i)=>(i?'L':'M')+X(i).toFixed(1)+' '+Y(v).toFixed(1)).join(' ');   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.setAttribute('fill','none');path.setAttribute('s
  • Network accessline 348
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 348
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

skills/finesse-ui/examples/nova-brutal-typographic.html

  • Network accessline 8
    /* finesse · register=brand · A=bone/black+one-hot-accent · B=display-as-layout · C=oversized-type · D=GSAP · E=press&ink    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/cs
  • Network accessline 8
    /* finesse · register=brand · A=bone/black+one-hot-accent · B=display-as-layout · C=oversized-type · D=GSAP · E=press&ink    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/cs
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital@1&display=swap');   * { margin: 0; padding:
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital@1&display=swap');   * { margin: 0; padding:
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital@1&display=swap');
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital@1&display=swap');
  • Network accessline 110
    <section class="hero">     <div class="kick">全球首个<b>纯数字</b>时装周。<br>48 间虚拟时装屋，<br>72 小时不落幕的秀场。</div>     <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" a
  • Network accessline 110
    <section class="hero">     <div class="kick">全球首个<b>纯数字</b>时装周。<br>48 间虚拟时装屋，<br>72 小时不落幕的秀场。</div>     <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" a
  • Network accessline 111
    <div class="kick">全球首个<b>纯数字</b>时装周。<br>48 间虚拟时装屋，<br>72 小时不落幕的秀场。</div>     <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" alt="look" /><div class="cap
  • Network accessline 111
    <div class="kick">全球首个<b>纯数字</b>时装周。<br>48 间虚拟时装屋，<br>72 小时不落幕的秀场。</div>     <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" alt="look" /><div class="cap
  • Network accessline 112
    <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" alt="look" /><div class="cap">LOOK 01 — ATELIER NOVA</div></div>
  • Network accessline 112
    <div class="hero-img"><img id="heroImg" src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1000&h=1400&fit=crop&q=80" alt="look" /><div class="cap">LOOK 01 — ATELIER NOVA</div></div>
  • Network accessline 133
    <div class="count" id="rwCount">01 / 06</div>     <div class="track" id="track">       <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><d
  • Network accessline 133
    <div class="count" id="rwCount">01 / 06</div>     <div class="track" id="track">       <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><d
  • Network accessline 134
    <div class="track" id="track">       <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><div class="idx">SS26</div><div class="nm"><div clas
  • Network accessline 134
    <div class="track" id="track">       <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><div class="idx">SS26</div><div class="nm"><div clas
  • Network accessline 135
    <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><div class="idx">SS26</div><div class="nm"><div class="a">VELA</div><div class="b">PARIS
  • Network accessline 135
    <div class="look tall"><img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 01</div><div class="idx">SS26</div><div class="nm"><div class="a">VELA</div><div class="b">PARIS
  • Network accessline 136
    <div class="look"><img src="https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 02</div><div class="idx">SS26</div><div class="nm"><div class="a">OBSCURA</div><div class="b">BERLIN</
  • Network accessline 136
    <div class="look"><img src="https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 02</div><div class="idx">SS26</div><div class="nm"><div class="a">OBSCURA</div><div class="b">BERLIN</
  • Network accessline 137
    <div class="look tall"><img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 03</div><div class="idx">SS26</div><div class="nm"><div class="a">KAIROS</div><div class="b">TOKY
  • Network accessline 137
    <div class="look tall"><img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 03</div><div class="idx">SS26</div><div class="nm"><div class="a">KAIROS</div><div class="b">TOKY
  • Network accessline 138
    <div class="look"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 04</div><div class="idx">SS26</div><div class="nm"><div class="a">MIRAGE</div><div class="b">SEOUL</di
  • Network accessline 138
    <div class="look"><img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 04</div><div class="idx">SS26</div><div class="nm"><div class="a">MIRAGE</div><div class="b">SEOUL</di
  • Network accessline 139
    <div class="look tall"><img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 05</div><div class="idx">SS26</div><div class="nm"><div class="a">SOLSTICE</div><div class="b">NE
  • Network accessline 139
    <div class="look tall"><img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 05</div><div class="idx">SS26</div><div class="nm"><div class="a">SOLSTICE</div><div class="b">NE
  • Network accessline 140
    <div class="look"><img src="https://images.unsplash.com/photo-1502716119720-b23a93e5fe1b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 06</div><div class="idx">SS26</div><div class="nm"><div class="a">AURUM</div><div class="b">MILAN</div
  • Network accessline 140
    <div class="look"><img src="https://images.unsplash.com/photo-1502716119720-b23a93e5fe1b?w=900&h=1300&fit=crop&q=80"><div class="no">LOOK 06</div><div class="idx">SS26</div><div class="nm"><div class="a">AURUM</div><div class="b">MILAN</div
  • Network accessline 145
    <section class="feature">     <div class="stick">       <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>
  • Network accessline 145
    <section class="feature">     <div class="stick">       <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>
  • Network accessline 146
    <div class="stick">       <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>       <div class="ftxt"><h2 class="anton">SEE THE<br>UNSEEN</h2><p>003 — CLO
  • Network accessline 146
    <div class="stick">       <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>       <div class="ftxt"><h2 class="anton">SEE THE<br>UNSEEN</h2><p>003 — CLO
  • Network accessline 147
    <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>
  • Network accessline 147
    <div class="fimg"><img id="featImg" src="https://images.unsplash.com/photo-1485462537746-965f33f7f6a7?w=1400&h=1000&fit=crop&q=80"></div>

skills/finesse-ui/examples/offscreen-editorial.html

  • Network accessline 8
    /* finesse · register=brand · A=cream/ink-light · B=serif-pair · C=ruled-editorial-columns · D=GSAP-scroll-reveal · E=paper&press    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapi
  • Network accessline 8
    /* finesse · register=brand · A=cream/ink-light · B=serif-pair · C=ruled-editorial-columns · D=GSAP-scroll-reveal · E=paper&press    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapi
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,500&family=Spectral:ital,wght@0,300;0,400;1,300&family=Inter:wght@40
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,500&family=Spectral:ital,wght@0,300;0,400;1,300&family=Inter:wght@40
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,500&family=Spectral:ital,wght@0,300;0,400;1,300&family=Inter:wght@400;500&display=swap');
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,500&family=Spectral:ital,wght@0,300;0,400;1,300&family=Inter:wght@400;500&display=swap');
  • Network accessline 115
    </div>     <div class="right">       <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />
  • Network accessline 115
    </div>     <div class="right">       <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />
  • Network accessline 116
    <div class="right">       <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />       <div class="feat"><div class="label" style="opacity:.85">封面影像 — COVER STORY</div><h2 class="p
  • Network accessline 116
    <div class="right">       <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />       <div class="feat"><div class="label" style="opacity:.85">封面影像 — COVER STORY</div><h2 class="p
  • Network accessline 117
    <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />
  • Network accessline 117
    <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1100&h=1500&fit=crop&q=80" alt="cover" />
  • Network accessline 142
    <!-- FULL BLEED PLATE -->   <section class="plate">     <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />
  • Network accessline 142
    <!-- FULL BLEED PLATE -->   <section class="plate">     <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />
  • Network accessline 143
    <section class="plate">     <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />     <div class="meta">
  • Network accessline 143
    <section class="plate">     <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />     <div class="meta">
  • Network accessline 144
    <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />
  • Network accessline 144
    <img id="plateImg" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1600&h=1100&fit=crop&q=80" alt="plate" />

skills/finesse-ui/examples/pawcare-adaptive-health.html

  • Network accessline 239
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="3.2"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8 2 2 0 11-2.8 2.8 1.6 1.6 0 00-2.7 1.1 2 2 0 01-4 0 1.6 1.6 0 00-2.6-1.1 2 2 0 11-2.8-2.8A1.6 1.6 0
  • Network accessline 239
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><circle cx="12" cy="12" r="3.2"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8 2 2 0 11-2.8 2.8 1.6 1.6 0 00-2.7 1.1 2 2 0 01-4 0 1.6 1.6 0 00-2.6-1.1 2 2 0 11-2.8-2.8A1.6 1.6 0
  • Network accessline 240
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg><span class="bad">5</span></div>     <div class="acct"><img src="data:im
  • Network accessline 240
    <div class="icon-circle"><svg viewBox="0 0 24 24" stroke="currentColor"><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></svg><span class="bad">5</span></div>     <div class="acct"><img src="data:im
  • Network accessline 241
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%231f8a86'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 241
    <div class="acct"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%231f8a86'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-weight='700
  • Network accessline 265
    <div class="card profile-card reveal">         <div class="profile-top">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'
  • Network accessline 265
    <div class="card profile-card reveal">         <div class="profile-top">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'
  • Network accessline 266
    <div class="profile-top">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3
  • Network accessline 266
    <div class="profile-top">           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3
  • Network accessline 267
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3E%3Cstop offset='1' stop-color='%23f
  • Network accessline 267
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3E%3Cstop offset='1' stop-color='%23f
  • Network accessline 287
    <div class="center-col">       <div class="hero-img reveal">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop off
  • Network accessline 287
    <div class="center-col">       <div class="hero-img reveal">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop off
  • Network accessline 288
    <div class="hero-img reveal">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/
  • Network accessline 288
    <div class="hero-img reveal">         <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/
  • Network accessline 289
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3E%3Cstop offset='1' stop-color='%23f
  • Network accessline 289
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d7f0ee'/%3E%3Cstop offset='1' stop-color='%23f
  • Network accessline 383
    if(fill){     const fd=d+' L '+X(vals.length-1).toFixed(1)+' '+H+' L '+X(0).toFixed(1)+' '+H+' Z';     const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 383
    if(fill){     const fd=d+' L '+X(vals.length-1).toFixed(1)+' '+H+' L '+X(0).toFixed(1)+' '+H+' Z';     const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 384
    const fd=d+' L '+X(vals.length-1).toFixed(1)+' '+H+' L '+X(0).toFixed(1)+' '+H+' Z';     const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');     fpath.setAttribute('d',fd);fpath.classList.add('theme-fill');fpath.style
  • Network accessline 384
    const fd=d+' L '+X(vals.length-1).toFixed(1)+' '+H+' L '+X(0).toFixed(1)+' '+H+' Z';     const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');     fpath.setAttribute('d',fd);fpath.classList.add('theme-fill');fpath.style
  • Network accessline 385
    const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 385
    const fpath=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 388
    if(!reduce){gsap.to(fpath,{opacity:1,duration:.8,delay:.7});}else{fpath.style.opacity=1;}   }   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 388
    if(!reduce){gsap.to(fpath,{opacity:1,duration:.8,delay:.7});}else{fpath.style.opacity=1;}   }   const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 389
    }   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.classList.add('theme-stroke');path.style.fill='none';path.style.stroke=color;
  • Network accessline 389
    }   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute('d',d);path.classList.add('theme-stroke');path.style.fill='none';path.style.stroke=color;
  • Network accessline 390
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 390
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 405
    const svg=document.getElementById('sparkEcg');   const d='M0 26 L28 26 L36 10 L44 42 L52 26 L70 26 L78 18 L86 34 L94 26 L120 26 L128 10 L136 42 L144 26 L162 26 L170 18 L178 34 L186 26 L240 26';   const path=document.createElementNS('http://
  • Network accessline 405
    const svg=document.getElementById('sparkEcg');   const d='M0 26 L28 26 L36 10 L44 42 L52 26 L70 26 L78 18 L86 34 L94 26 L120 26 L128 10 L136 42 L144 26 L162 26 L170 18 L178 34 L186 26 L240 26';   const path=document.createElementNS('http://
  • Network accessline 406
    const d='M0 26 L28 26 L36 10 L44 42 L52 26 L70 26 L78 18 L86 34 L94 26 L120 26 L128 10 L136 42 L144 26 L162 26 L170 18 L178 34 L186 26 L240 26';   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute
  • Network accessline 406
    const d='M0 26 L28 26 L36 10 L44 42 L52 26 L70 26 L78 18 L86 34 L94 26 L120 26 L128 10 L136 42 L144 26 L162 26 L170 18 L178 34 L186 26 L240 26';   const path=document.createElementNS('http://www.w3.org/2000/svg','path');   path.setAttribute
  • Network accessline 407
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');
  • Network accessline 407
    const path=document.createElementNS('http://www.w3.org/2000/svg','path');

skills/finesse-ui/examples/relay-agent-console.html

  • Network accessline 5
    <meta name="viewport" content="width=device-width, initial-scale=1"> <title>RELAY 订单异常处理台 · AI 工作台 — Web</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 5
    <meta name="viewport" content="width=device-width, initial-scale=1"> <title>RELAY 订单异常处理台 · AI 工作台 — Web</title> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 6
    <title>RELAY 订单异常处理台 · AI 工作台 — Web</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 6
    <title>RELAY 订单异常处理台 · AI 工作台 — Web</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 7
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 7
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 8
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 9
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
  • Network accessline 9
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
  • Dangerous shell operationline 492
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;
  • Dangerous shell operationline 492
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;
  • Access to secretsline 569
    [Credential-related source omitted]
  • Access to secretsline 569
    [Credential-related source omitted]
  • Dangerous shell operationline 732
    el.scrollIntoView({behavior: RM ? 'auto' : 'smooth', block:'center'});
  • Dangerous shell operationline 732
    el.scrollIntoView({behavior: RM ? 'auto' : 'smooth', block:'center'});
  • Dangerous shell operationline 736
    document.querySelector('.aside-scroll').scrollTo({top:0, behavior: RM ? 'auto' : 'smooth'});
  • Dangerous shell operationline 736
    document.querySelector('.aside-scroll').scrollTo({top:0, behavior: RM ? 'auto' : 'smooth'});
  • Dangerous shell operationline 843
    el.scrollIntoView({behavior: RM ? 'auto' : 'smooth', block:'center'});
  • Dangerous shell operationline 843
    el.scrollIntoView({behavior: RM ? 'auto' : 'smooth', block:'center'});

skills/finesse-ui/examples/signal-phosphor-terminal.html

  • Network accessline 8
    /* finesse · register=brand · A=mono+single-acid · B=mono-forward · C=live-data-panel · D=Canvas-2D · E=signal&phosphor    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2
  • Network accessline 8
    /* finesse · register=brand · A=mono+single-acid · B=mono-forward · C=live-data-panel · D=Canvas-2D · E=signal&phosphor    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;700&display=swap');   *, *::before, *::after { margin
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;700&display=swap');   *, *::before, *::after { margin
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;700&display=swap');
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;700&display=swap');
  • Network accessline 28
    #c { position:fixed; inset:0; width:100%; height:100%; z-index:0; }   .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wid
  • Network accessline 28
    #c { position:fixed; inset:0; width:100%; height:100%; z-index:0; }   .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wid
  • Network accessline 29
    .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fract
  • Network accessline 29
    .grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fract
  • Network accessline 30
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 30
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

skills/finesse-ui/examples/sparkcraft-bauhaus-geometric.html

  • Network accessline 8
    /* finesse · register=brand · A=warm-paper+five-primaries · B=geometric-display+humanist-sans · C=geometric-collage · D=CSS-only-geometry · E=building-blocks    * back-filled from EXAMPLES.md; dials not recorded for this build */ @import ur
  • Network accessline 8
    /* finesse · register=brand · A=warm-paper+five-primaries · B=geometric-display+humanist-sans · C=geometric-collage · D=CSS-only-geometry · E=building-blocks    * back-filled from EXAMPLES.md; dials not recorded for this build */ @import ur
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap'); *,*::before,*::after{margin:0;
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap'); *,*::before,*::after{margin:0;
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

skills/finesse-ui/examples/stakent-monitoring-dashboard.html

  • Network accessline 22
    radial-gradient(700px 500px at 100% 60%,rgba(167,139,250,.10),transparent 60%)} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.
  • Network accessline 22
    radial-gradient(700px 500px at 100% 60%,rgba(167,139,250,.10),transparent 60%)} body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.
  • Network accessline 23
    body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type
  • Network accessline 23
    body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type
  • Network accessline 24
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' he
  • Network accessline 24
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' he
  • Network accessline 180
    <main class="main">     <div class="topbar">       <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y
  • Network accessline 180
    <main class="main">     <div class="topbar">       <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y
  • Network accessline 181
    <div class="topbar">       <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y='52' font-family='sans-
  • Network accessline 181
    <div class="topbar">       <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y='52' font-family='sans-
  • Network accessline 182
    <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-
  • Network accessline 182
    <div class="user"><img alt="user" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect width='80' height='80' fill='%238b5cf6'/%3E%3Ctext x='40' y='52' font-family='sans-serif' font-size='30' font-

skills/finesse-ui/examples/studio-quiet-luxury.html

  • Network accessline 8
    /* finesse · register=brand · A=off-white+forest-sage · B=one-family-100-900 · C=max-whitespace-split · D=CSS-only-dual-mask · E=concrete&light    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://f
  • Network accessline 8
    /* finesse · register=brand · A=off-white+forest-sage · B=one-family-100-900 · C=max-whitespace-split · D=CSS-only-dual-mask · E=concrete&light    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://f
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;600;800;900&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=s
  • Network accessline 9
    * back-filled from EXAMPLES.md; dials not recorded for this build */   @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;600;800;900&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=s
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;600;800;900&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 10
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;600;800;900&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 20
    两个面只要够不一样就成立，不必是照片。真实项目里换回真实 URL 即可。        注意 SVG 里的片段引用必须写 %23（CSS 里 # 会被当成 URL fragment）。 */     --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><line
  • Network accessline 20
    两个面只要够不一样就成立，不必是照片。真实项目里换回真实 URL 即可。        注意 SVG 里的片段引用必须写 %23（CSS 里 # 会被当成 URL fragment）。 */     --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><line
  • Network accessline 21
    注意 SVG 里的片段引用必须写 %23（CSS 里 # 会被当成 URL fragment）。 */     --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1
  • Network accessline 21
    注意 SVG 里的片段引用必须写 %23（CSS 里 # 会被当成 URL fragment）。 */     --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1
  • Network accessline 22
    --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='hsl(38 9%25 78%25)'/><sto
  • Network accessline 22
    --ph-day:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='hsl(38 9%25 78%25)'/><sto
  • Network accessline 23
    --ph-reveal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='h' x1='0' y1='0' x2='.4' y2='1'><stop offset='0' stop-color='hsl(45 16%25 95%25)'/
  • Network accessline 23
    --ph-reveal:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><defs><linearGradient id='h' x1='0' y1='0' x2='.4' y2='1'><stop offset='0' stop-color='hsl(45 16%25 95%25)'/
  • Network accessline 24
    --ph-p1:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700' preserveAspectRatio='none'><rect width='900' height='700' fill='hsl(36 10%25 70%25)'/><rect x='0' y='430' width='900' height='270' fill='hsl(
  • Network accessline 24
    --ph-p1:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 700' preserveAspectRatio='none'><rect width='900' height='700' fill='hsl(36 10%25 70%25)'/><rect x='0' y='430' width='900' height='270' fill='hsl(
  • Network accessline 25
    --ph-p2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' preserveAspectRatio='none'><rect width='700' height='700' fill='hsl(90 7%25 64%25)'/><path d='M0 470 L700 410 L700 700 L0 700Z' fill='hsl(96
  • Network accessline 25
    --ph-p2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' preserveAspectRatio='none'><rect width='700' height='700' fill='hsl(90 7%25 64%25)'/><path d='M0 470 L700 410 L700 700 L0 700Z' fill='hsl(96
  • Network accessline 26
    --ph-p3:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' preserveAspectRatio='none'><rect width='700' height='700' fill='hsl(40 12%25 82%25)'/><rect x='0' y='500' width='700' height='200' fill='hsl(
  • Network accessline 26
    --ph-p3:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700' preserveAspectRatio='none'><rect width='700' height='700' fill='hsl(40 12%25 82%25)'/><rect x='0' y='500' width='700' height='200' fill='hsl(

skills/finesse-ui/references/3d-effects.md

  • Network accessline 151
    <script type="importmap"> { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 151
    <script type="importmap"> { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 152
    { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 152
    { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 153
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 153
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  • Network accessline 154
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  • Network accessline 154
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"

skills/finesse-ui/references/apple-design.md

  • Network accessline 78
    - [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/): platform guidance; consult the relevant platform when implementing native behavior.
  • Network accessline 78
    - [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/): platform guidance; consult the relevant platform when implementing native behavior.
  • Network accessline 79
    - [Designing Fluid Interfaces, WWDC 2018](https://developer.apple.com/videos/play/wwdc2018/803/): interaction continuity and direct manipulation.
  • Network accessline 79
    - [Designing Fluid Interfaces, WWDC 2018](https://developer.apple.com/videos/play/wwdc2018/803/): interaction continuity and direct manipulation.
  • Network accessline 80
    - [Community apple-design reference](https://github.com/attentiondotnet/emilkowalski_skills/blob/main/skills/apple-design/SKILL.md): secondary synthesis; principles were adapted, not copied wholesale or treated as official parameter tables.
  • Network accessline 80
    - [Community apple-design reference](https://github.com/attentiondotnet/emilkowalski_skills/blob/main/skills/apple-design/SKILL.md): secondary synthesis; principles were adapted, not copied wholesale or treated as official parameter tables.
  • Network accessline 81
    - [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill): Bento and spatial style taxonomy. Its decorative Liquid Glass recipe is not a universal Apple requirement.
  • Network accessline 81
    - [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill): Bento and spatial style taxonomy. Its decorative Liquid Glass recipe is not a universal Apple requirement.

skills/finesse-ui/references/asset-sourcing.md

  • Access to secretsline 50
    [Credential-related source omitted]
  • Access to secretsline 50
    [Credential-related source omitted]
  • Network accessline 79
    - **Don't imply endorsement.** A stock photo of a person is not that person endorsing the (often fictional) brand — fine for mood/lifestyle imagery, not fine as a fake "customer testimonial" headshot presented as real. - **Real alt text**,
  • Network accessline 79
    - **Don't imply endorsement.** A stock photo of a person is not that person endorsing the (often fictional) brand — fine for mood/lifestyle imagery, not fine as a fake "customer testimonial" headshot presented as real. - **Real alt text**,
  • Network accessline 81
    - **If hotlinking turns out to be slow or unreliable once actually wired in** — a request hangs, takes far longer than a normal image fetch (tens of seconds instead of near-instant), or times out during your own verification pass — **stop a
  • Network accessline 81
    - **If hotlinking turns out to be slow or unreliable once actually wired in** — a request hangs, takes far longer than a normal image fetch (tens of seconds instead of near-instant), or times out during your own verification pass — **stop a

skills/finesse-ui/references/chart-crafting.md

  • Network accessline 140
    > **First: make GSAP available.** Every `gsap.*` call below assumes GSAP is loaded — a `gsap.*` call with no GSAP on the page just silently does nothing (and your chart never reveals). Pick one, before your script runs: > - **Self-host (pre
  • Network accessline 140
    > **First: make GSAP available.** Every `gsap.*` call below assumes GSAP is loaded — a `gsap.*` call with no GSAP on the page just silently does nothing (and your chart never reveals). Pick one, before your script runs: > - **Self-host (pre
  • Network accessline 141
    > - **Self-host (preferred — offline-safe, zero remote dependency, version frozen):** put `gsap.min.js` (+ `ScrollTrigger.min.js` only if you use scroll) in `./lib/`, then `<script src="lib/gsap.min.js"></script>`. This is what the bundled
  • Network accessline 141
    > - **Self-host (preferred — offline-safe, zero remote dependency, version frozen):** put `gsap.min.js` (+ `ScrollTrigger.min.js` only if you use scroll) in `./lib/`, then `<script src="lib/gsap.min.js"></script>`. This is what the bundled
  • Network accessline 142
    > - **CDN (only if the project allows remote deps):** `<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>`.
  • Network accessline 142
    > - **CDN (only if the project allows remote deps):** `<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>`.
  • Dangerous shell operationline 162
    const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;
  • Dangerous shell operationline 162
    const RM = matchMedia('(prefers-reduced-motion: reduce)').matches;

skills/finesse-ui/references/design-dna.md

  • Network accessline 71
    position: fixed; inset: 0; z-index: 1; pointer-events: none;   opacity: .032;   /* .025–.05. Dark pages lower, busy pages higher */   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20
  • Network accessline 71
    position: fixed; inset: 0; z-index: 1; pointer-events: none;   opacity: .032;   /* .025–.05. Dark pages lower, busy pages higher */   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20
  • Network accessline 72
    opacity: .032;   /* .025–.05. Dark pages lower, busy pages higher */   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' bas
  • Network accessline 72
    opacity: .032;   /* .025–.05. Dark pages lower, busy pages higher */   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' bas
  • Network accessline 73
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 73
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 204
    <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 204
    <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 205
    <style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');   *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  • Network accessline 205
    <style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');   *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  • Network accessline 206
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 206
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
  • Network accessline 210
    body { background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }   body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:
  • Network accessline 210
    body { background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }   body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:
  • Network accessline 211
    body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.032;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurb
  • Network accessline 211
    body::before { content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.032;     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurb
  • Network accessline 212
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'
  • Network accessline 212
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25'

skills/finesse-ui/references/h5-mobile.md

  • Dangerous shell operationline 460
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;
  • Dangerous shell operationline 460
    const RM = matchMedia('(prefers-reduced-motion:reduce)').matches;

skills/finesse-ui/references/motion.md

  • Dangerous shell operationline 31
    const RM   = matchMedia('(prefers-reduced-motion: reduce)').matches;
  • Dangerous shell operationline 31
    const RM   = matchMedia('(prefers-reduced-motion: reduce)').matches;
  • Network accessline 152
    content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;   opacity: .04; mix-blend-mode: overlay; background-size: 180px 180px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfi
  • Network accessline 152
    content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;   opacity: .04; mix-blend-mode: overlay; background-size: 180px 180px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfi
  • Network accessline 153
    opacity: .04; mix-blend-mode: overlay; background-size: 180px 180px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctav
  • Network accessline 153
    opacity: .04; mix-blend-mode: overlay; background-size: 180px 180px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctav
  • Network accessline 154
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' heig
  • Network accessline 154
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' heig

skills/finesse-ui/scripts/detect.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Executable scriptline 1
    #!/usr/bin/env node

skills/finesse-ui/scripts/test-apple-detector.mjs

  • Executable scriptline 1
    Executable file
  • Executable scriptline 1
    Executable file

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

No combined signals at this commit.

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeNativeManifest .claude-plugin/plugin.json.claude/skills/<skill-name>/
CodexNativeManifest AGENTS.md.agents/skills/<skill-name>/
CursorNativePath .cursor/rules/finesse-ui.mdc.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md .codebuddy/skills/finesse-ui/SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotNativeManifest .github/copilot-instructions.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md .codebuddy/skills/finesse-ui/SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

You might also use

mattpocock/skills

Skills for Real Engineers. Straight from my .agents directory.

316.3kGitHub stars

obra/superpowers

An agentic skills framework & software development methodology that works.

313.4kGitHub stars

NousResearch/hermes-agent

The agent that grows with you

261.1kGitHub stars

multica-ai/andrej-karpathy-skills

Behavioral guidelines to reduce common LLM coding mistakes. Use when writing, reviewing, or refactoring code to avoid overcomplication, make surgical changes, surface assumptions,…

230.1kGitHub stars

anthropics/skills

Public repository for Agent Skills

188.1kGitHub stars

DietrichGebert/ponytail

Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.

185.7kGitHub stars

Explore alternatives and comparisons

Add this badge to your README

It updates every night and links to this page.

mouse-lin/finesse-skill: #917 on hotskills, 965 stars

[![mouse-lin/finesse-skill on hotskills](https://hotskills.dev/badge/mouse-lin-finesse-skill.svg)](https://hotskills.dev/skill/mouse-lin-finesse-skill/)