frago-view-content-generate-tips-json

tsaijamey's avatarfrom tsaijamey

JSON file content generation guide. Use this skill when you need to create JSON files that can be previewed via `frago view`. Covers formatted display and best practices.

⭐35stars🔀4forks📁View on GitHub🕐Updated Jan 2, 2026
[Developer Tools]

When & Why to Use This Skill

This Claude skill provides a comprehensive framework for generating and optimizing JSON files specifically tailored for the `frago view` preview tool. It solves the common challenges of data malformation and poor readability by enforcing automatic formatting, syntax highlighting, and adherence to structural best practices, ensuring that JSON outputs are both valid and easy to inspect during the development process.

Use Cases

  • API Response Previewing: Generate and visualize mock API data structures to verify field accuracy and nesting before backend implementation.
  • Configuration Management: Create standardized JSON configuration files with consistent indentation and naming conventions (snake_case/camelCase) for better maintainability.
  • Data Debugging and Validation: Quickly identify and fix common JSON syntax errors such as trailing commas, single quotes, or unquoted keys using the provided validation tips.
  • Technical Documentation: Produce clean, well-organized JSON snippets that follow industry standards for inclusion in project READMEs or style guides.
namefrago-view-content-generate-tips-json
descriptionJSON file content generation guide. Use this skill when you need to create JSON files that can be previewed via `frago view`. Covers formatted display and best practices.

JSON File Content Generation Guide

Preview JSON files via frago view with automatic formatting and syntax highlighting.

Preview Commands

frago view data.json                      # Default theme
frago view config.json --theme monokai    # Specify theme

Rendering Features

Automatic Formatting

  • JSON content automatically beautified (Pretty Print)
  • Indentation aligned
  • Key-value pairs clearly displayed

Syntax Highlighting

Element Color Example (github-dark)
Key names Purple #d2a8ff
String values Blue #a5d6ff
Numbers Cyan #79c0ff
Booleans Red #ff7b72
null Red #ff7b72
Brackets/commas White #c9d1d9

JSON Format Specification

Correct Format

{
    "name": "Project Name",
    "version": "1.0.0",
    "enabled": true,
    "count": 42,
    "tags": ["tag1", "tag2"],
    "config": {
        "nested": "value"
    },
    "nullable": null
}

Common Errors

Error Example Fix
Trailing comma {"a": 1,} {"a": 1}
Single quotes {'a': 1} {"a": 1}
Unquoted keys {a: 1} {"a": 1}
Comments // comment Comments not supported
undefined undefined Use null

Best Practices

1. Indentation

  • Use 2 or 4 spaces for indentation
  • Maintain consistency

2. Key Naming

  • Use snake_case or camelCase
  • Maintain consistency throughout the file
{
    "user_name": "snake_case style",
    "userName": "camelCase style"
}

3. Data Organization

  • Group related fields
  • Place important fields first
{
    "id": "001",
    "name": "Important fields first",
    "metadata": {
        "created_at": "2024-01-01",
        "updated_at": "2024-01-02"
    }
}

4. File Size

  • Single file < 1MB optimal
  • Consider pagination or splitting files for large data

Use Cases

  • API response data preview
  • Configuration file viewing
  • Data structure review
  • Debug data inspection

Display Themes

Same as code files, supports the following themes:

Theme Command
github-dark (default) frago view data.json
monokai frago view data.json --theme monokai
atom-one-dark frago view data.json --theme atom-one-dark

Notes

Issue Cause Solution
Parse failure JSON format error Use JSON validator
Truncated display Value too long Use nested structure
Slow rendering File too large Split or simplify

JSON Validation

Ensure JSON is valid before preview:

# Python validation
python -m json.tool data.json

# jq validation
jq . data.json
  • jq: Command-line JSON processor
  • jsonlint: JSON validator
  • VSCode: JSON editing and formatting