abgne/line-liff
skills/line-liff/SKILL.md
Comprehensive reference for LINE Front-end Framework (LIFF) SDK — building web apps inside LINE with authentication, messaging, QR scanning, permanent links, pluggable SDK, and LIFF plugin development. This skill should be used when the user asks to "build a LIFF app", "initialize liff.init()", "send messages from LIFF", "use Share Target Picker", "scan a QR code in LIFF", "create a permanent link", "develop a LIFF plugin", or mentions LIFF SDK, LINE Front-end Framework, CDN/npm integration, pluggable SDK tree-shaking, LIFF-to-LIFF transitions, LIFF browser vs external browser, Endpoint URL configuration, or server-side ID token verification from LIFF. Always use this skill whenever the user mentions LIFF, web apps inside LINE, or LINE Front-end Framework, even if they don't explicitly say "LIFF SDK".
tools
Updated Mar 26, 2026
$ install --global
skillsauthnpx skillsauth add abgne/line-dev line-liffInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
70%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 7, 2026, 1:56 PM214.3s1 file scanned
SKILL.md
- name:
- line-liff
- description:
- Comprehensive reference for LINE Front-end Framework (LIFF) SDK — building web apps inside LINE with authentication, messaging, QR scanning, permanent links, pluggable SDK, and LIFF plugin development. This skill should be used when the user asks to "build a LIFF app", "initialize liff.init()", "send messages from LIFF", "use Share Target Picker", "scan a QR code in LIFF", "create a permanent link", "develop a LIFF plugin", or mentions LIFF SDK, LINE Front-end Framework, CDN/npm integration, pluggable SDK tree-shaking, LIFF-to-LIFF transitions, LIFF browser vs external browser, Endpoint URL configuration, or server-side ID token verification from LIFF. Always use this skill whenever the user mentions LIFF, web apps inside LINE, or LINE Front-end Framework, even if they don't explicitly say "LIFF SDK".
LINE LIFF (Front-end Framework)
Do not answer LIFF questions from memory — LINE updates APIs frequently and training data is unreliable. Always consult the references below.
Reference for building, reviewing, and debugging LIFF web apps inside LINE.
Workflow
Build
- Read references/guidelines.md (registration, endpoint URL rules, environment compatibility)
- Load the relevant reference for the feature being implemented
- For architecture or design choices, consult references/experts.md for directional guidance
- Write code following specs and constraints from references
Review / Debug
- Read references/guidelines.md (URL constraints, authentication flow, API availability)
- Load relevant references for the code being reviewed
- Cross-check code against specs (endpoint URL rules, scope requirements, environment limitations, init order)
- For design pattern concerns, consult references/experts.md
- Report violations with reference to specific constraints
Environment Variables
LIFF_ID=LIFF app ID (from LINE Developers Console)
LINE_LOGIN_CHANNEL_ID=LINE Login Channel ID (for server-side JWT verification)
LINE_LOGIN_CHANNEL_SECRET=Channel secret (server-side only)
CHANNEL_ACCESS_TOKEN=Channel access token (for LIFF Server API — manage LIFF apps programmatically)
SDK
Install via CDN or npm. For tree-shaking (reduce ~34% bundle size), use pluggable SDK.
SDK installation, CDN/npm setup, pluggable SDK → references/api.md § Pluggable SDK
Initialization
liff.init({ liffId: 'YOUR_LIFF_ID', withLoginOnExternalBrowser: true })
.then(() => { /* use LIFF APIs */ })
.catch(err => console.error(err.code, err.message));
- Must be called before all LIFF APIs (except pre-init methods)
withLoginOnExternalBrowser: true— auto-trigger login in external browserliff.ready— Promise that resolves when init completes
Getting Started
- Create a LINE Login channel in LINE Developers Console
- Add a LIFF app and set the Endpoint URL (HTTPS required)
- Integrate SDK, call
liff.init() - Or scaffold with
npx @line/create-liff-app(React/Vue/Svelte/Next.js/Nuxt/vanilla)
API Reference
Complete API reference (methods, parameters, scopes, availability matrix) → references/api.md
View Sizes
| Type | Coverage | |------|----------| | Full | 100% screen | | Tall | ~75% | | Compact | ~50% |
Key Constraints
- Endpoint URL:
liff.init()only works at or below the registered Endpoint URL - URL handling: modify URLs only after
liff.init()resolves - Universal Links: use
https://liff.line.me/{liffId}as primary entry point - Token security: send raw ID Token to server for verification, never expose decoded token → see server-auth.md
- Login behavior differs: auto in LIFF browser, manual in external browser
- Deprecated APIs:
liff.scanCode()→ usescanCodeV2();liff.getLanguage()→ usegetAppLanguage();liff.permanentLink.createUrl()→ usecreateUrlBy()(may be removed in v3)
Reference Index
| File | Topic | |------|-------| | references/api.md | LIFF v2 API complete reference, pluggable SDK modules, error codes | | references/guidelines.md | Registration, endpoint URL rules, authentication flow, UI/UX, environment compatibility | | references/navigation.md | LIFF URLs, liff.state, permanent links, LIFF-to-LIFF transitions, browser minimization | | references/plugins.md | LIFF plugin development, hooks system, official plugins (Inspector, Mock) | | references/server-api.md | LIFF Server API (v1) — programmatic LIFF app CRUD (create, update, list, delete) | | references/server-auth.md | Server-side ID Token (JWT) verification | | references/cli.md | LIFF CLI — local HTTPS dev server, app CRUD, Inspector debugging, ngrok | | references/experts.md | LIFF domain experts for architecture guidance |
SDK & Tools
- npm: @line/liff
- Pluggable SDK:
@line/liff/core+ individual modules - Official plugins: @line/liff-inspector | @line/liff-mock
- LIFF CLI: CLI tool (create, serve, deploy, HTTPS dev server)
- Create LIFF App:
npx @line/create-liff-app— scaffolding (React/Vue/Svelte/Next.js/Nuxt/vanilla, JS/TS) - LIFF Playground: liff-playground.netlify.app — online API testing
- Starter app: line/line-liff-v2-starter (vanilla/Next.js/Nuxt)
Related Skills
abgne/messaging-api
development
VerifiedTrustedCommunity
Comprehensive reference for LINE Messaging API — webhook setup, message sending, Flex Message design, Rich Menu management, audience targeting, insights, coupons, and channel access tokens. This skill should be used when the user asks to "build a LINE Bot", "set up a webhook", "send a push message", "design a Flex Message", "create a Rich Menu", "manage audience targeting", "get messaging insights", "create a coupon campaign", "debug webhook signature verification", or mentions LINE Messaging API, LINE OA chatbot, reply/push/multicast/narrowcast/broadcast, Flex Message JSON, Rich Menu, group chat bot, channel access token, or URL schemes. Always use this skill whenever the user mentions LINE bots, chatbots, LINE OA, or any messaging-related LINE integration, even if they don't explicitly say "Messaging API".
SKILL.mdUpdated Mar 26, 2026
abgne/line-notification-message
development
VerifiedTrustedCommunity
Reference for LINE Notification Messages — phone-number-based messaging to non-friends, template type (premade layouts) and flexible type (custom Flex Message), delivery completion webhooks, user consent flow, SMS authentication, and billing. Use when the user asks to "send a notification message via phone number", "hash a phone number for PNP", "handle delivery completion webhook", "set up template or flexible notification", "check notification message count", "integrate LON", or mentions LINE notification messages, LINE Official Notification (LON), PNP push, phone-number-based delivery, hashed phone number, notification template, delivery completion event, consent states, or SMS authentication for notifications. Always use this skill whenever the user mentions LINE notification messages, PNP, LON, LINE Official Notification, LINE 通知型訊息, or phone-based LINE messaging to non-friends, even if they don't explicitly say "notification message".
SKILL.mdUpdated Mar 26, 2026
abgne/line-mini-app
development
VerifiedTrustedCommunity
Comprehensive reference for LINE MINI App — Service Messages, Common Profile Quick Fill, In-App Purchase, Console setup (3 internal channels), submission review, and performance guidelines for web apps running inside LINE as an enhanced LIFF platform. This skill should be used when the user asks to "build a LINE MINI App", "send a service message", "set up Common Profile Quick Fill", "implement in-app purchase", "configure MINI App Console", "submit MINI App for review", or mentions LINE MINI App, Service Messages, notification token, Common Profile, IAP purchase flow, 3 internal channels, consent simplification, Custom Path, custom share messages, or verified vs unverified MINI App. Always use this skill whenever the user mentions LINE MINI App, mini apps in LINE, or enhanced LIFF features like service messages or in-app purchase, even if they don't explicitly say "MINI App".
SKILL.mdUpdated Mar 26, 2026
abgne/line-login
development
VerifiedTrustedCommunity
Comprehensive reference for LINE Login (OAuth 2.1) — authorization code flow, PKCE, token management, ID token JWT verification, user profiles, bot linking, and login button design. This skill should be used when the user asks to "implement LINE Login", "add Log in with LINE", "set up OAuth authorization flow", "verify an ID token", "refresh an access token", "link a bot to login", "design a login button", or mentions LINE Login, OAuth 2.1, PKCE, authorization code flow, ID token JWT verification, token refresh/revocation, user profile retrieval, bot linking, SSO login, LIFF authentication, or LINE MINI App authentication. Always use this skill whenever the user mentions LINE authentication, social login with LINE, or OAuth flows involving LINE, even if they don't explicitly say "LINE Login".
SKILL.mdUpdated Mar 26, 2026