English · 简体中文
Personal frontend design patterns and Codex skills distilled from my own financial product work.
Skills · Install · Principles
A small, growing set of reusable decisions for financial interfaces: how values carry directional meaning, and how dense charts keep their final labels readable without corrupting the underlying market facts.
This is not a product codebase, market-data source, trading system, or investment advice.
Make financial values readable at a glance. Defines Chinese-market red-up/green-down magnitude semantics for values, labels, tables, heatmaps, and charts. Small moves stay soft; stronger moves become more vivid without turning low-magnitude values muddy.
Keep the end of a line truthful and legible. Defines collision-aware endpoint labels, real-point connectors, compact collision chains, state annotations, and replay-time behavior. The strongest line stays parallel; only labels that would overlap follow downward.
The skills are deliberately complementary:
| Concern | Skill | Rule of thumb |
|---|---|---|
| What a value's color means | stock-colors |
Color reinforces a signed number and its unit. |
| Where a line-end label belongs | financial-chart-end-labels |
Move labels, not market data or curve geometry. |
git clone https://github.com/7oMB2006/financial-ui-patterns.git
cp -R financial-ui-patterns/skills/stock-colors ~/.codex/skills/
cp -R financial-ui-patterns/skills/financial-chart-end-labels ~/.codex/skills/On Windows PowerShell, use Copy-Item -Recurse in place of cp -R. Reload Codex after installation so it discovers the skill folders.
- Derive rules from real financial-product implementation work, then abstract them so they remain portable.
- Keep product names, private data, endpoints, and application-specific conventions out of reusable skills.
- Treat a financial interface as an explanation surface: show signed values, units, timestamps, source state, and unavailable data explicitly.
- Prefer interaction and visual rules that preserve market facts over decorative visual effects.
Released under the MIT License.