Skip to main content

fintech-dashboard-pro

Use when designing banking, finance, investment, payments, risk, and revenue dashboards. Pro version focused on precision, compliance cues, risk visibility, and decision context; emphasizes deep information architecture, strong hierarchy, explicit states, responsive behavior, accessibility, and validation checks.

Ir para a instalação

Informações da origem

Repositório
Mr-Q526/TeamCC-Platform
Última atividade na origem
15 de abril de 2026 às 03:16
Idioma detectado do SKILL.md
inglês
Estrelas
8
Forks
1

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Explorador de arquivos
4 arquivos

Exibindo SKILL.md

SKILL.md
Instruções da origem · Visualização somente leitura
schemaVersion
2026-04-11T00:00:00.000Z
skillId
frontend/fintech-dashboard-pro
name
fintech-dashboard-pro
displayName
Fintech Dashboard PRO
description
Use when designing banking, finance, investment, payments, risk, and revenue dashboards. Pro version focused on precision, compliance cues, risk visibility, and decision context; emphasizes deep information architecture, strong hierarchy, explicit states, responsive behavior, accessibility, and validation checks.
aliases
["fintech-dashboard-pro","Fintech Dashboard PRO","fintechdashboardpro","金融科技","金融","fintech","仪表盘","看板","控制台","dashboard","仪表盘设计","dashboard design"]
version
0.1.0
sourceHash
sha256:d777ae2dbb57624f48b434b9e5c1217a802656f32a3a6eb4c7f7da6c05846fe3
domain
frontend
departmentTags
["frontend-platform"]
sceneTags
["design"]
# Fintech Dashboard PRO Use this skill when the task is to design banking, finance, investment, payments, risk, and revenue dashboards. Goal: produce a high-quality, production-ready page or interface that supports precision, compliance cues, risk visibility, and decision context. ## Variant intent - Use the rigorous version when quality, accessibility, conversion, and maintainability matter. - Optimize for deep information architecture, strong hierarchy, explicit states, responsive behavior, accessibility, and validation checks. - Prefer concrete UI decisions over generic advice. ## Default workflow 1. Define the primary user, task, and success action. 2. Map the minimum page structure needed for the scenario. 3. Establish hierarchy: what must be understood first, second, and third. 4. Design responsive behavior for mobile and desktop. 5. Add states: loading, empty, error, success, disabled, and permission where relevant. 6. Run the final checks before delivery. ## Design rules - Use clear section names and user-facing copy. - Make the primary action visually dominant and repeat it only when it helps. - Keep navigation and secondary actions subordinate to the main task. - Use spacing, typography, and alignment before adding decorative containers. - Do not hide critical information behind hover-only interactions. - Preserve keyboard access, readable contrast, and touch targets. ## Pro guidance - Build a strong visual and interaction thesis before writing components. - Include proof, context, and state transitions when they affect trust. - Use component variants intentionally: default, hover, active, focus, disabled, loading, error, and empty. - Validate information architecture, accessibility, and responsive behavior explicitly. - Avoid filler sections, ornamental cards, and copy that does not change user confidence. ## Reject these failures - Ambiguous primary action - Important status or pricing hidden below the fold - Dense UI with no scan order - Decorative visuals that compete with the task - Missing mobile behavior ## Final checks - Can the target user understand the page purpose in under five seconds? - Is the next action clear without reading every paragraph? - Are edge states and responsive behavior accounted for?
Ver no GitHub